CSS background property

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

Background Property

CSS background property is used to specify individual properties of CSS background. This is called as a shorthand property.

Syntax:

background: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit

Initial values

Initial values of respective individual properties.

Applies to

background property can be applied to all HTML elements.

Inheritance

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

Percentages

Applied only on background-position property.

Media

visual.

Computed value

Computed values of respective individual properties.

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 shorthand property

CSS code:

body {background: aliceblue url('w3r.gif') no-repeat scroll 10% 10%; }

HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example of background shorthand property</title>
<link rel='stylesheet' href="example-background-shorthand.css" type='text/css' />
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In viverra lacinia eros iaculis fringilla. Quisque eu justo sem. Vivamus facilisis tellus sed nunc congue dignissim. Aenean felis metus, vulputate eget scelerisque eu, dignissim eget tortor. </p>
</body>
</html>

View this example in a separate browser window

Example of background shorthand property.

CSS background property

Background Property

See also