Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tom Meysen
Tom Meysen
4,026 Points

interactive site, using div for logo, background image auto resize depending on screen width.

I'm stuck on something i'm working on atm. I'm making my mobile-first template, and will move on with media querries, but I don't get why it doesnt work. My logo will be the background inside a div, depending on screen sizes it will resize and maintain ratio.

HTML

<body>  
    <div id="header">
        <div id="logo"></div>
    </div>
</body>

CSS

#header {
  max-width: 480px;
  height: 135px;
  position: absolute;
}

#logo {
  background: url('Logo150PxTekst.png') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: auto;
  position: relative;
}

3 Answers

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

Your header does not have a height to it. You need to have a height set for the percentages to calculate due to how the box-model calculations work for percentages.

http://www.w3.org/TR/CSS2/visudet.html#propdef-width

Since your logo is going to scale with your parent div, you'll still need to play around with the media queries a bit on various sizes, but that should get you started. You shouldn't need to add a non-breaking space or anything inside of the div.

Jeremy Faith
Jeremy Faith
Courses Plus Student 56,696 Points

You are correct about the $nbsp, my mistake, thank you.

Tom Meysen
Tom Meysen
4,026 Points
Tom Meysen
Tom Meysen
4,026 Points

Okay, I fixed my problem myself afther some logical thinking. I putted the logo as an img tag inside an container. Then i gave them some widths in % This fixed my problem, hope it will help somebody else aswell.

<body>

    <div id="header">
      <div id="logoContainer">
         <img id="logo" src="Logo150PxTekst.png" />
      </div>

    </div>

  </body>

CSS

#header {
  max-width: 480px;
  max-height: 135px;
  background: green;
  text-align: center;
  padding: 0;
}

#logoContainer {
  width: 75%;
  margin: 0 auto;
}  

#logo {
  width: 100%; 
}
Jeremy Faith
Jeremy Faith
Courses Plus Student 56,696 Points

Great job! I glad you came up with a solution.

Jeremy Faith
PLUS
Jeremy Faith
Courses Plus Student 56,696 Points
Jeremy Faith
Jeremy Faith
Courses Plus Student 56,696 Points

First thing you should add content to the empty div #logo. You can do this a few different ways but one way is to add $nbsp to the div to test it out.

 <div id="logo">&nbsp</div>

Then in the css file under #header remove the position: absolute. Also, under #logo change the background-size from cover to auto, cover will stretch to cover the entire div and distort the image, unless that is what you were going for. I would also change the height to 100%.

I think just adding content to the div and removing the position: absolute should help you. The other stuff may not be what you are looking to use for your project.

Hope this helps you.

Tom Meysen
Tom Meysen
4,026 Points

I changed everything like you said, but the image still doesn't scale down, if let's say the width changes from 480px to 300px.

HTML

<body>  
    <div id="header">
    <div id="logo">&nbsp</div>
    </div>
</body>

CSS

#header {
  max-width: 480px;
  height: 135px;
}

#logo {
  background: url('Logo150PxTekst.png') no-repeat center center;
  background-size: auto;
  width: 100%;
  height: 100%;
  position: relative;
}