I am using an image as a background for the header. I have saved the image as 1024x341 to accomodate 1024x768 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.
http://genresdb.com/testing for the css http://genresdb.com/testing/styles/style.css The site has several other problems that I have been working on as well like the sidebar being completely broken.
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%
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.
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>.
CSS:
HTML:
http://genresdb.com/testing for the css http://genresdb.com/testing/styles/style.css
The site has several other problems that I have been working on as well like the sidebar being completely broken.
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.
Ashton Sanders
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>.
img.source-image {width: 100%;
position: absolute;
top: 0;
left: 0;
}
(or give the image an ID of #img , and use #img)