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 CSS Basics (2014) Basic Layout Backgrounds: Size and Position

Ben Quartermaine
Ben Quartermaine
14,966 Points
Posted by Ben Quartermaine
Ben Quartermaine
14,966 Points

Background-size: cover not working correctly...

I am building a small front-end project. I want to fill the background of one if my divs with an image. I have used the background-size: cover value, but the image appears to be clipped and isn't scaling properly.

Here is the HTML:

<div class="banner">
    <h1>I design and build websites from scratch for small businesses and projects.</h1>
    <p><a href="#contact">GET IN TOUCH</a></p>
</div>

And here is my CSS:

.banner {
    background: url('../img/laptop-banner.jpeg') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 1px;
    min-height: 100%;
    color: white;
    text-align: center;
}

.banner h1 {
    max-width: 80%;
    margin: 90px auto 90px;
    font-size: 2em;
}

.banner a {
    border: solid 2px white;
    padding: 20px;
    font-family: 'Varela Round', sans-serif;
}

.banner p {
    /*margin: 50px 0;*/
}

.banner a:link {
    color: white;
}

.banner a:visited {
    color: white;
}

.banner a:hover {
    color: #583D87;
    border: solid 2px #583D87;
    background-color: white;
}

Would the dimension of my image have any relevance to this issue? It is 3000 x 2003

Kai Nightmode
Kai Nightmode
37,045 Points

Is it possible for you to share a link to the live page? It would be a lot easier to troubleshoot that way.

1 Answer

Ben Quartermaine
Ben Quartermaine
14,966 Points
Ben Quartermaine
Ben Quartermaine
14,966 Points

No, I want the image to retain its proportions, if I set it to contain the image appears stretched. If i re-size the browser window, because the aspect ratios aren't the same the image appears 'zoomed in' and part of the image is clipped off.