The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS making an image resizable

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #24765

    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.


    #header {
    padding: 25px 25px;
    width: 1200px;
    height: 341px;


    Code: for the css
    The site has several other problems that I have been working on as well like the sidebar being completely broken.


    i think this article will help you 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:


    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%

    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


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

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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.