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 trialBen Quartermaine
14,966 PointsBackground-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
1 Answer
Tom Checkley
25,165 PointsI think you may be wanting contain instead of cover? Not sure if this helps.
Ben Quartermaine
14,966 PointsNo, 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.
Kai Nightmode
37,045 PointsKai Nightmode
37,045 PointsIs it possible for you to share a link to the live page? It would be a lot easier to troubleshoot that way.