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.

Featured Threads

Hot Threads This Week

Hot Threads This Month