View Full Version : Adjusting the size of a background image

07-04-2006, 08:30 PM
I doubt there is much hope for this, but here goes:

I have a list where each part of the list holds a different background image. I am planning on "overlaying" a blank gif on each list item. So far, I have got the effect I want, however there is now an issue with the sizes of my background images in that they are all different sizes and far too big.

I want to resize each background image so that each one will be 700x200 for example. From some searches I have been conducting, there appears to be a CSS property, background-size, that would work for me, however I think it is only CSS3 and would not work in many browsers. I suppose my other options are to resize all of my images, however there are hundreds and I would like to keep from doing that. If background-size is not only CSS3, what values would I use to on it to change the width and height, for example?

This is the code I am using, if it could help:

#two {
background: url('../toolarge2.jpg') center no-repeat fixed;
#three {
background: url('../toolarge3.jpg') center no-repeat fixed;
#four {
background: url('../toolarge4.jpg') center no-repeat fixed;

<li id="two"><img src="../overlay.gif" GALLERYIMG="no" alt="image" /></li>
<li id="three"><img src="../overlay.gif" GALLERYIMG="no" alt="image" /></li>
<li id="four"><img src="../overlay.gif" GALLERYIMG="no" alt="image" /></li>

07-04-2006, 08:39 PM
Yeah, background-size (http://www.w3.org/TR/css3-background/#the-background-size) is a CSS3-only property. Why don't you just resize the images in an image editor? I can't really tell what you're trying to do but it would seem like its being over-complicated.

07-04-2006, 09:14 PM

I figured it would be, but it will be fantastic once all browsers support it....

It does look like I will end up doing that, but I was trying to avoid it because I am using so many different images. I am trying to address an image theft issue, but I will not get into it because I know the flora of commentary about protecting content and such.

Thanks, though!