Learn

The first CSS function we are going to learn about is the url() function. This function is used to link to external resources and load them into the stylesheet. These resources can be images, fonts, other stylesheets, and more. The url() function takes a single argument: the location of the resource in string format. The location of the linked resource can be provided as absolute or relative paths.

If we were to want to set an image that has a relative path of images/bg-image.jpg as a background, we would need to load the path to that image as the argument for the url() function as a string.

.main-banner { background: url('images/bg-image.jpg'); background-repeat: no-repeat; background-position: right; }

Above we set the background of our .main-banner selector ruleset to be images/bg-image.jpg. The background was set to not repeat and be placed on the right side of the banner. Notice how a relative path was used as the argument.

Background images set using the url() function may not always fill the background in the specific way we want. For instance, if the background image is smaller than the container area, the image will repeat in a tile pattern by default. There are various properties that allow us to set the background image in the manner we want, such as background-repeat, background-size, and background-position, to name a few.

Instructions

1.

In style.css, locate the .bg-image selector ruleset and create a background-image property inside of it. Set a url() function as the value of the background-image property and then load in the argentina.jpg image located in the images folder as the function’s argument.

2.

Next, center the background image using the background-position property.

3.

Finally, set the size of the background image to cover the container area using the background-size property.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?