homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

img src versus img background (http requests improvement)

Msg#: 4311732 posted 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



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

Msg#: 4311732 posted 10:10 am on May 13, 2011 (gmt 0)

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.


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

Msg#: 4311732 posted 5:43 pm on May 13, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved