Can't get background header image to fit to width.. tried everything

Question

I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.

Here is what I have:

#header {
    background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 209px;
}

Website url is http://hamsoc.polymath.io

Thank you for your help in advance!

Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:

"You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px. remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller."

possible duplicate of [Stretch and scale CSS background](http://stackoverflow.com/questions/376253/stretch-and-scale-css-background) — Diodeus - James MacFarlane, May 17 '13 at 15:55

score 3 · Accepted Answer · answered May 17 '13 at 15:59

3

You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.

remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.

answered May 17 '13 at 15:59

Duncan Beattie

2,306
17
17

1

That did the trick! Thank you so much! Can you explain how it works? Just so I know for future reference. Thanks a ton! – steveai May 17 '13 at 16:02
Pushing the depth of the container by a percentage of the body width means that it always scales in the same ratio. have a look at [FluidSquares](http://dinosaurswithlaserz.com/2011/07/18/fluid-squares-v2/). – Duncan Beattie May 17 '13 at 16:06

score 1 · Answer 2 · answered May 17 '13 at 16:02

I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:

#header img{
    max-width: 100%;
    height: auto;
}

This will also allow you to make the image "clickable" which is generally wanted in a header logo.

DEMO FIDDLE

FULLSCREEN

score 0 · Answer 3 · answered May 17 '13 at 15:55

0

Have you used the a precentage to set the height of the image in the div?

So set the image height to be say 100% of the div?

If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?

answered May 17 '13 at 15:55

Callum

932
2
8
12

I have tried to set it to 100% of the div, but the problem the div is so small so I need to define the height in pixels otherwise it won't show the entire image. – steveai May 17 '13 at 15:57

score 0 · Answer 4 · answered May 17 '13 at 15:59

The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.

Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.

img {
    max-width: 100%;
}

Can't get background header image to fit to width.. tried everything

4 Answers4