The background-image property

The background-image property sets a background image of an element. By default, the image will cover the entire block with its copies, however, this behavior can be canceled using the background-repeat property.

Syntax

selector {
	background-image: url(path to an image);
}

selector {
	background-image: none;
}

Values

Value	Description
`url`	Path to the file with an image. The name of the image can be in double quotes, single quotes or without quotes at all.
`none`	Desables a background image for an element.

Default value: none.

Example

Let's set a background image using background-image, disabling its repetition using the background-repeat property:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Example

Without background-repeat a background image will cover the entire block:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Example

You can simultaneously set a background image and set a background color using background-color. In this case, where there is no background image, there will be a background color:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

The background-image property

Syntax

Values

Example

Example

Example

See also