bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations Practice
CSS•CSS Foundations Practice

CSS Background Image

CSS background-image

Formula

The background - image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example

Set the background image for a page:

body {
background-image: url("paper.gif");
}

Example

This example shows a bad combination of text and background image. The text is hardly readable:

body {
background-image: url("bgdesert.jpg");
}

Note:

When using a background image, use an image that does not disturb the text.

Formula

The background image can also be set for specific elements, like the < p > element:
Example p {
background-image: url("paper.gif");
}

The CSS Background Image Property

Property

Description background-image

Sets the background image for an element

Video: CSS Background Images

Previous

CSS Colors Code Challenge

Next

CSS Background Attachment