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 trialBoonsuen Oh
18,788 Pointsbackground-size: cover;
Hi, I have included background-size: cover but the background-image is still crops and collapse Here's the code.
<body>
<div id="main-menu">
<nav class="seventy-pc-width">
<h1 id="logo"><ZAYN OH></h1>
<ul>
<li class="active"></ABOUT</li>
<li>BLOG</li>
<li>CONTACT></li>
</ul>
</nav>
</div>
<div class="row"></div>
<div id="main-header">
<div class="seventy-pc-width main-header-container">
<h2>learn.Try {and + Pratice}</h2>
<h1>I LOVE CODING</h1>
</div>
</div>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
height: 100%;
width: 100%;
}
#main-header {
height: 420px;
background-color: rgba(0,0,0,0.8);
width: 100%;
box-sizing: border-box;
display: flex;
justify-content: center;
flex-direction: column;
background-image: url('img/main-header-bg.gif');
background-size: cover;
background-repeat: no-repeat;
}
The exact image used for background: here The result of current code: here
2 Answers
Steven Parker
229,204 PointsYou didn't say what you wanted to happen. But here are your choices:
- fit width and crop height: "
background-size: cover
" - fit height and leave excess width blank: "
background-size: contain
" - fit the image to the container by stretching: "
background-size: 100% 100%
" - fit the container to the image: "
width: 800px; height: 600px;
" (for this particular image's size)
S M
892 PointsThis article might help https://css-tricks.com/perfect-full-page-background-image/
Boonsuen Oh
18,788 PointsBoonsuen Oh
18,788 PointsAny way to make the background image auto adjust itseft to fit the width and height, without any crops or blank?