Grow your CSS skills. Land your dream job.

making an image resizable

  • # May 3, 2009 at 5:24 am

    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.

    # May 3, 2009 at 6:07 am

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

    # May 6, 2009 at 2:29 am

    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:

    # May 6, 2009 at 3:47 am

    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

    # May 6, 2009 at 8:55 am

    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.

    # May 6, 2009 at 12:57 pm

    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)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".