CSS background-image property

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

background-image property

CSS background image property sets background image of an HTML element.

Syntax

background-image: uri | none | inherit

Values

uri : Path of the image file which is to be used as background image.

none : If set, the associated element does not have any background image set.

inherit : If set, the associated element takes computed value of its parent element's background image property.

Initial values

None.

Applies to

background-image property can be applied to all HTML elements.

Inheritance

If no value specified, background-image property does not get the computed value of its parent element.

Percentages

Not available.

Media

visual.

Computed value

Either an absolute URI or none.

Browser compatibility

Browser	Version
Internet Explorer	4.0 and above
Firefox (Gecko)	1.0 and above
Opera	3.5 and above
Safari (WebKit)	1.0 and above

Example of background-image property when value="uri"

CSS code:

p {background-image: url('background-image-2.gif') }

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example of background-image property when value="color" | w3resource</title>
<link rel="stylesheet" type="text/css" media="screen,projection" href="example-of-background-image-property-when-value-uri.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget luctus lacus. Praesent faucibus, odio nec convallis fermentum, magna augue pharetra urna, ut laoreet augue risus bibendum tellus. Donec pretium molestie vulputate. Morbi rutrum, sem eget porta varius, nibh mauris ornare neque, eu viverra risus tellus ut erat. In risus quam, egestas vel aliquet et, vulputate ut eros. Nam hendrerit auctor tortor. Nullam ut commodo magna. Etiam tincidunt risus ut tellus malesuada eget commodo dui congue. Donec interdum tempus nunc sollicitudin molestie. Aenean auctor hendrerit volutpat. Cras rutrum pretium sapien quis suscipit. Sed faucibus tincidunt sapien ac scelerisque. Donec pulvinar interdum augue, id facilisis dui commodo id.</p>
</body>
</html>

View this example in a separate browser window

Example of background-image property when value="uri".

CSS background-image property

background-image property

See also