Header to size with window

HTML & CSS
1

www.neverup-neverin.com

I am trying to get the header to fit the window at the moment, this is the image with “Lister Lets with Style” and the house behind it.

I have already tried setting the width to 100% but it doesn’t seem to fill the div “header” when I resize the window, could someone tell me how to do this please?

Thanks in advance

2

i might have misunderstood your question here; if so, I apologise. :slight_smile:

Your image is only 960px wide, so if your header is wider than that, it will never expand to fill the space. There is also the problem if you reduce the viewport to less than that, not only the image but the included text is cut off. It would be better to have the text as actual text, with just an image in the background, so that you don’t lose the text at smaller viewport sizes.

3

You have not specified if this is an image or what. If this an image have you tried to resize your image according the size of your window where the header fits in? Im not sure of what is that since it your css shows this:

/*TOP of the page */
.header {
margin: 0;
background-image:url(…/images/header.jpg);
background-repeat: no-repeat;
height:278px;
outline:1px solid cyan;
}

I think you must set your width same with your header you can use actual width in pixels…

4

HI,

Not sure if this is what you are asking but you can stretch the background image for ie9+ by adding these rules:


.header {
    background-position:0 100%;
    background-size: cover;
}

That will stretch the image to fit in ie9+.

I;m not sure if that’s what you were asking anyway.

5

If you want the header image to stretch and shrink proportionally with the browser-width in IE7+, you have to put the image in the html as foreground-img (instead of as bg-img in the css), and set the width (without height) of the img on 100% in the css:

<div class="container">
    <div class="header"><img src="http://www.neverup-neverin.com/images/header.jpg" alt="" /></div>
    <div class="navbar">
    ...

.header {
    margin: 0;
    outline: 1px solid #00FFFF;
}
.header img { /* note: no image width and/or height in the html! */
    width: 100%;
}

Not harmful for modern browsers.

6

You don’t need to worry about the width and height attributes being present in the html because css trumps them. Just set height to auto.:slight_smile:


img{width:100%;height:auto}
7

This is perfect, just tested it on my page and it does exactly what I wanted it to do. Is this the way most headers are coded so they stretch with a browser?

Thanks again

8

Congratulations! :slight_smile:

Is this the way most headers are coded so they stretch with a browser?

I’m afraid there are no statistics for that. You can tally all stretching headers you see on the web in the coming year, to get an impression. :wink: