Responsive design


#1

How does changing background-size to 'cover' actually change the background? I am not able to understand in the example mentioned in the below exercise.

Exercise:
https://www.codecademy.com/courses/learn-responsive-design/lessons/sizing-elements/exercises/scaling-background-img?action=lesson_resume


#2

Setting the background-size property to cover is basically saying you want that image to cover the width and height of the corresponding container. :slight_smile:

Example:


HTML:

<div>
 <!-- I am an the image file taking up the whole div -->
</div>

CSS:

div {
   background: url("example.png");
   background-size: cover;
}

#3

I have completed Responsive Design successfully. Thanks @bandit!