CODEWITHSUNDEEP
htmlcss
Louis de Looze
Louis de Looze

Reputation: 53

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

Upvotes: 5

Views: 12264

Answers (3)

CSLearner
CSLearner

Reputation: 259

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;

Upvotes: 2

Hugo St-Arnaud
Hugo St-Arnaud

Reputation: 169

It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.

What you need is a media query like this one and place it at the end of you css

@media (max-width: 971px) {
    .header-logo {
        width: 100%;
    }
}

That way any screen size under 971px will change the width property to 100% of screen size.

You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.

Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 3

Josef El Bez
Josef El Bez

Reputation: 212

It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use @media to set your logo width.

using @media:

@media screen and (min-width: 480px) {
    .header-logo{
       width: 250px;
       background-position: center;
    }
}

Upvotes: 2

Related Questions