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.

Report a Bug
If you see a bug or any other issue with this page, please report it here.