This course will be retired on July 12, 2021. We recommend "CSS Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
In this video, we'll learn how certain properties affect the size and position of an element's background.
Quick Reference
background-position
Controls the background position of a background image. By default, a background image’s initial position is the top-left corner of the containing element.
background
Shorthand for setting the individual background values in one place.
cover
The cover
value adjusts the background area so that it's completely covered by the background image, while maintaining its width and height proportions:
.main-header {
background-image: url('../img/mountains.jpg');
background-size: cover;
}
You need to sign up for Treehouse in order to download course files.
Sign up