I would like to get a whole image as my header

Question

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>

You are going to need to post more relevant HTML/CSS demonstrating the problem, or provide a live example.. — Josh Crozier, Oct 09 '13 at 19:20
there are a few ways you can achieve this result of a full page width image without horizontal scroll bars. one method i frequently use is combining the css to set the images size to 'width:100%; height: auto;' on the image. if its parent container is full browser width; the image will adjust as the view-port is re-sized — Joe, Oct 09 '13 at 19:52

score 0 · Answer 1 · answered Oct 09 '13 at 19:21

0

Try.

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

answered Oct 09 '13 at 19:21

Zeeba

1,124
1
12
14

score 0 · Accepted Answer · answered Oct 09 '13 at 19:21

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/

score 0 · Answer 3 · answered Oct 09 '13 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.

score 0 · Answer 4 · answered Oct 09 '13 at 19:26

0

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

answered Oct 09 '13 at 19:26

Giovanni Silveira

1,281
8
7

score 0 · Answer 5 · answered Oct 10 '13 at 11:24

0

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.

answered Oct 10 '13 at 11:24

user2864354

3
1

I would like to get a whole image as my header

5 Answers5