Make a Website

Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Web Browser

Code Editor

Learn

In CSS, the background-image property sets a background image of your choice for a given selector, as seen below.

.hero {
  background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg");
}

The CSS rule above assigns the image hosted at

https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg

to elements that have a class attribute set to hero.

To control the size of the chosen background image, use the property background-size as seen below:

.hero {
  background-image: url("https://s3.amazonaws.com/codecademy-content/projects/make-a-website/lesson-2/bg.jpg");
  background-size: cover;
}

Here, we have specified that we want the image to completely cover elements with the .hero class.