Louis de Looze Louis de Looze - 6 months ago 9
Javascript Question

Scaling a div with window size

So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.

My CSS style:

.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}


I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.

All help is appreciated!

Louis

Answer

The issue is these two lines of code:

height: 200px;

width:971px;

When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.

Here are two quick references that I hope may be helpful.

http://www.w3schools.com/cssref/css_units.asp

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

To fix it you might do something like this:

height: 100em;

width:486em;

(Don't use my exact values of course.)

EDIT: Alternatively it may be good to use a percentage like this:

width: 971px;
max-width:100%

EDIT 2: It was pointed out to me that you'd probably want to include this line as well:

height:auto;
Comments