I am using an image as a background for the header. I have saved the image as 1024×341 to accomodate 1024×768 resolution. I tried using width: 100% and height: auto, but then the picture goes away. When I change it back to say 1200px x 341px it comes back at the 1024px x 341px (which I expected)and of course doesn’t allow for resizing. Any ideas or suggestions would be greatly appreciated.
i think this article will help you http://css-tricks.com/how-to-resizeable-background-image/. make sure to read about Chris’ third attempt
I tried that 3rd option that you referenced, but it didn’t work as a matter of fact not only did the image go away but I lost the background color as well. From what I have noticed, I seem to be able to change the width to 100% with no problem but if I remove the height or change it to a percentage, the image goes away. I’m wondering if that might be because I have already manipulated the size when I saved the image? This is really driving me nuts! :cry:
I’ll see what I can do to help. I’ll first mention that normally when everything about a CSS declaration (background in this case) breaks, it’s probably because of syntax or HTML problems.
I always put a in an empty <div> </div> otherwise, the dive will disappear in some browsers
Make sure to have spaces between different values of your background property (before no-repeat in this case).
btw, Div’s are 100% width on default, so if you don’t give it a width, it will be 100%
What are you trying to do that isn’t working? The background seems to be there just fine.
I was finally able to get the background back. I made the assumption (incorrectly) that it was an inheritable property, so once I fixed that and added it to #page and #header it came back. The original and continued problem is in getting the image to be liquid. Whenever I remove the height property the image goes away – same thing if I set it to anything other than a set number. The image I am using has been sized for the original page width I wanted which was 1200px but in trying to convert to a liquid design I seem to have to keep it at a set px for height. If you have any suggestions – I have tried width=100%; and it has no problem with that. I have height: 341px; currently, but I don’t want the image to get distorted if it goes above 1200px or below 1024 px – in between that width it won’t much matter. I have also tried eliminating the height property and using position: absolute; top: 0; and I can’t remember what the other property was. I have also tried setting height: auto; at which point the image goes away. I even tried removing the dimension properties and setting them in a .resize class but that didn’t work either.
Oh… I read the title of the post again… lol
You’re trying to get the Image to stretch.
That link chazzwick gave is all you will need. I would be sure to read the entire thing. In #3 You need to apply this code to a <img> not a image background image on a <div>.
(or give the image an ID of #img , and use #img)
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".