kaitco
07-04-2006, 07: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:
CSS
#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;
}
HTML
<ul>
<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>
</ul>
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:
CSS
#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;
}
HTML
<ul>
<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>
</ul>