In order to improve the load time of my website, I am looking for a method to reduce the number of HTTP requests. To do this, I use the CSS Sprites technique.
However, I sometimes need to use <img src=... /> to use some auto-size functionality (case of auto size div background). The drawback of this, is that for each <img src=... /> a HTTP request is posted.
I tried to use the CSS Sprites technique with <img>, as follows:
The "width" where you've got it, in the CSS, means "100% of its own width", so right now it's doing exactly what you told it to do.* What you need instead is <img src blahblah width = "100%"> or equivalent in whatever language you're using. Don't specify a height unless you want that funhouse-mirror effect; by default it will keep its proportions.
* Pause for chorus of
I really hate this damned machine I wish that they would sell it. It never does quite what I want But only what I tell it.
How about a dynamic inline rule? It's not as clean, but in some CMS situations you have to resort to inline rules.
<div style="width: 800px; height: 1600px";>
Another way around it is if the background image is truly background, it encapsulates the content, right? Clear it.
<div class="clear-div"></div> </div>
assign clear:both to clear-div.
A side note: the code you posted will still be an http request, you still have img (I think? Without a src, would it?) You're just assigning a background to it. In any case, it's an unnecessary object. Assign the background to other elements in your layout and reduce the objects by one.