img src versus img background (http requests improvement)

[boeledi]

Hi,

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.

My question:

I tried to use the CSS Sprites technique with <img>, as follows:

img.clsImg {
background: transparent url('.....') no-repeat;
width:100%;
height:100%;
border:0px;
}

<div .......>
<img class=clsImg alt='' />
</div>

The issue is that the background image is not resized... but cropped.

Is there any solution to this?

Many thanks

[lucy24]

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.

[rocknbil]

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 id="bg-image">

<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.