homepage Welcome to WebmasterWorld Guest from 54.205.247.203
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
img src versus img background (http requests improvement)
boeledi




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

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




msg:4311742
 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.

rocknbil




msg:4312009
 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>
</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