Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

img src versus img background (http requests improvement)

9:40 am on May 13, 2011 (gmt 0)


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;

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

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

Is there any solution to this?

Many thanks
10:10 am on May 13, 2011 (gmt 0)

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

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.
5:43 pm on May 13, 2011 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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>

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.