CSS Visual Rules : Background-Image

 VISUAL RULES

CSS has the ability to change the background of an element. One option is to make the background of an element an image. This is done through the CSS property background-image. Its syntax looks like this:

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}
  1. The background-image property will set the element’s background to display an image.
  2. The value provided to background-image is a url. The url should be a URL to an image. The url can be a file within your project, or it can be a link to an external site. To link to an image inside an existing project, you must provide a relative file path. If there was an image folder in the project, with an image named mountains.jpg, the relative file path would look like below:
.main-banner {
  background-image: url('images/mountains.jpg');
} 

Instructions:
In style.css, change the background image of the element with the.image class. The image is stored in the following URL: https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg
Hint
TheThe syntax used to set a background image looks like this: syntax used to set a background image looks like this:
selector {
  background-image: url('url of the image here');
}

Comments

Post a Comment