Tutor:To add an image to the background of an element, we use the `background-image` property. We must wrap the image path inside the `url()` function.

⭐ 0 EXP

CSS Background Mastery

Unlock nodes by learning properties and values.

Concept 1: The url() Function

To define a background image, you assign a value to background-image. This value must use the url() function to point to the image file's location.

System Check

Which syntax is correct for setting a background image?

background-image: 'image.jpg'background-image: url('image.jpg')background-image: src('image.jpg')image: url('image.jpg')

Community Showcase

Share Hero Sections

Created a stunning background effect? Share your code snippets.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

CSS Background Image

Pascual Vila

Frontend Instructor.

The background-image property allows you to display an image behind the content of an HTML element. It's a fundamental property for creating visually appealing web pages, hero sections, and UI cards.

The URL Function

To specify the image, you use the url() function. The value inside can be a relative or absolute path to the image file. By default, the image is placed at the top-left corner of the element and repeated vertically and horizontally.

Controlling Repetition

Often, you don't want the image to tile. The background-repeat property controls this behavior.

repeat: The default behavior (tiles in both directions).
no-repeat: Shows the image only once.
repeat-x: Tiles horizontally only.
repeat-y: Tiles vertically only.

Sizing and Positioning

Size: Use background-size: cover to make the image fill the entire container, cropping it if necessary to maintain aspect ratio. Use contain to ensure the whole image is visible.

Position: Use background-position to control where the image sits within the container (e.g., center, top right).

Background Glossary

background-image: CSS property that sets one or more background images for an element.
url(): CSS function used to include a file. Required for specifying the image source.
background-size: cover: Scales the image as large as possible to fill the container without stretching. Often crops the image.
background-position: Sets the starting position of a background image (e.g., center, top left).

📖 INDEX