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

Ammu Nair
Ammu Nair
9,100 Points
Posted by Ammu Nair
Ammu Nair
9,100 Points

How to make background-image responsive - to fit for mobile screens

Hi,

I am using mobile first approach. I have a background image set for the header. Code below: index.html

<header>
      <span>Developing and Designing</span>
      <h1>Ammu Nair | Front End Developer</h1>
      <nav>
        <ul>
          <li><a href="#" class="home">Home</a></li>
          <li><a href="#" class="about">About</a></li>
          <li><a href="#" class="contact">Contact</a></li>
        </ul>

      </nav>
    </header>

style.css

*{
  box-sizing:border-box;
}
header{
  max-width:100%;
  width:100%;
  padding:100px 25px;
  height:500px;
  background-color:blue;
  color:#eacb19;
  text-align:center;

  background-image:url('../img/sunset.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  width:100%;
}
header h1{
  text-shadow:5px 8px 10px green;
}
header ul{
  list-style:none;
  padding-top:4em;
  margin: 0 10px;

}
header li{
  display:inline-block;
}

For mobile sizes, the image is not displayed fully, although i have specified background-size:cover property. Please advise.

Ammu Nair
Ammu Nair
9,100 Points
Ammu Nair
Ammu Nair
9,100 Points

Thanks for your reply Jasper Huting Checked out the link but even that is not working. I am testing on chrome itself, by resizing my browser window. So cant be a problem with safari.

1 Answer

Steven Parker
Steven Parker
232,149 Points
Steven Parker
Steven Parker
232,149 Points

I'm not sure if you're seeing the same thing, but what I saw could be explained just by geometry.

The "cover" mode will only show the entire image when the aspect ratio of the display area is the same as the image. When you have a different aspect ratio on the screen, it's normal for the image to be clipped in either the horizontal or vertical dimension.

If that doesn't explain it, perhaps you could be a bit more specific about what you're observing, and make a snapshot of your workspace and provide the link to it. That will allow your issue to be more exactly replicated.

Ammu Nair
Ammu Nair
9,100 Points
Ammu Nair
Ammu Nair
9,100 Points

Yes.. The image is getting clipped by a little bit. I think that explanation is perfect Steven Parker. Thanku so much for that.