I would like to get a whole image as my header

Question

I would like to get a whole image as my header

70 views Asked by user2864354 At 09 October 2013 at 19:18

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>

Original Q&A

There are 5 answers

Zeeba On 09 October 2013 at 19:21

Try.

#header {
    max-width: 100%;
    background:#ffffff url("header.png") repeat-x;
}

acairns On 09 October 2013 at 19:24

You may be looking for a background cover:

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Using the cover method will scale the images to fill the container.

Giovanni Silveira On 09 October 2013 at 19:26

You can set #header img { max-width: 100%; }

user2864354 On 10 October 2013 at 11:24

Hmm, if i do a background-image, the image itself does not show up. Maybe beacause its 1400px in width, can css crop this for each diffrent width of the browser witout any horizontal scrolling bar.

**ronnyrr** · Accepted Answer · 2013-10-09T19:21:38+00:00

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/

TechQA.

I would like to get a whole image as my header

There are 5 answers

Related Questions in CSS

Related Questions in IMAGE

Related Questions in BROWSER

Related Questions in HEADER

Related Questions in ADJUSTABLE

Popular Questions

Popular Tags

Trending Questions