4

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

alexwc_
  • 1,595
  • 2
  • 24
  • 35
Louis de Looze
  • 43
  • 1
  • 5

3 Answers3

2

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;
CSLearner
  • 249
  • 1
  • 5
  • 17
  • That would work as well. Actually that would probably work better than my initial suggestion. In that case it would be something like this: width:971px; max-width:100%; – CSLearner May 19 '16 at 19:22
  • What's the difference between em and vw and do percentages work on the current width of the window? – Louis de Looze May 19 '16 at 19:29
  • I'm not sure of all the pros and cons of em and vw unfortunately. With the percentage I believe it adjusts based on the size of its container. This means it would get smaller or bigger as you adjust your web browser's size. – CSLearner May 19 '16 at 19:34
  • When using max-width should I do the same for height? – Louis de Looze May 19 '16 at 19:38
  • You certainly could but if your image already has a certain ratio the height should adjust automatically. – CSLearner May 19 '16 at 19:43
  • I tried all the sugestions out but it didn't work unfortunately... When using max width i'm only adding a scrolling bar not scaling it – Louis de Looze May 19 '16 at 19:54
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/112441/discussion-between-louis-de-looze-and-cslearner). – Louis de Looze May 19 '16 at 19:58
2

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;
    }
}
Josef El Bez
  • 302
  • 1
  • 11
2

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

Hugo St-Arnaud
  • 159
  • 5