cssimagebrowserheaderadjustable

I would like to get a whole image as my header

Hey, I would like to get a whole image, in the width of the browser, as my header. But the thing is, i get a horizontal scroll bar, and I don't want that. What I want is that the image adjust if the browser also adjust. Is this possible with css? Sorry for my bad english. This is my code

#header {
        Margin-left:auto;
        Margin-right:auto;
        heigth:400px;
        position: center center;    
        min-width: 100%;
        max-width: 1024;
}

     <body>
        <div id="header">
            <img src="header.png" />
        </div>
Solution

  • You could chose to set your image as background image and use background-size: cover; like this:

    #header {
    width: 100%; height 400px;
    margin: 0 auto;
    background: url("../header.png");
    background-size: cover;
}

<div id="header"></div>

    You can find more explanation about background-size here: http://www.css3.info/preview/background-size/