making an image resizable

[saxraiin]

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.

CSS:

Code:

#header {
margin-top:25px;
padding: 25px 25px;
}
#header_img{
background:url(../images/Gathering_Of_The_Herds4.jpg)no-repeat;
width: 1200px;
height: 341px;
}

HTML:

Code:

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.

[chazzwick]

i think this article will help you http://css-tricks.com/how-to-resizeable-background-image/. make sure to read about Chris’ third attempt

[saxraiin]

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:

[AshtonSanders]

Hey man,

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 &nbsp; 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%

Code:

background:url(../images/Gathering_Of_The_Herds4.jpg) no-repeat;

What are you trying to do that isn’t working? The background seems to be there just fine.
Ashton Sanders

[saxraiin]

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.

[AshtonSanders]

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>.

Code:

img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

(or give the image an ID of #img , and use #img)

[Author]

Posts