CSS Background Image Property

CSS Background Image Property

Background images are used for decorative things like textures, list markers, buttons, and icons, sometimes as a full page background image on a website or a header.

CSS Background image property sets the background image displayed in an element. Background images are specified with a URL value that uses the URL functional notation to tell the browser where to find the picture.

The URL we specify can be optionally enclosed in either single or double quotes, and can also contain white space before or after the optionally quoted URL.

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

Initial Value	none
Applies to	All elements. It also applies to ::first-letter and ::first-line
Inherited	no
Media	Visual
Computed Value	as specified, but with URIs made absolute
Animatable	no
Canonical order	The uniuqe non-ambiguous order defined by the formal grammer

Syntax background-image: none; background-image: url(http://www.example.com/my_image.png); background-image: inherit;
Values none

Is a keyword denoting the absence of images.

<image>

Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.

Example body { background-image: url("http://p1.pichost.me/i/20/1433003.jpg"); }
Watch GIF Try It Now

If the picture we specify is not been displayed--for example, the URL is not working, or the image no longer exists in the directory--the browser will treat the background image as if it's value was none, and it will display a transparent background.

By default, a background image is repeated or tiled both horizontally and vertically so that it covers the entire element.

CSS Background-repeat Property

Specifies how a background image will repeat itself within a box.

Possible Values

inherit

repeat (default) - tiled, repeating the image both horizontally and vertically.

repeat-x - repeating the image horizontally only.

repeat-y - repeating the image vertically only.

no-repeat - not repeating the image at all, showing just one instance.

The default value for background-repeat is "repeat." The background image is repeated both vertically and horizontally so that it covers the entire background image painting area. Now, if we only want the image to repeat horizontally on the X axis, we could use the value "repeat x" The value "repeat y" repeats the image vertically on the Y axis.

#title { background-repeat: repeat-x; }

Let's look at an example of how we can change the css background with the background-image and background-repeat property

Example body { background-image: url("/images/chrome.gif"); background-repeat: repeat; background-position: right top; margin-right: 200px; }

Watch GIF Try It Now

You can also repeat the background image both vertically and horizontally as well

CSS Background Image repeat Horizontally Example

To repeat the css background-image horizontally you need to specify background-reapt property as repeat-x like this: background-repeat: repeat-x;
body { background-image: url("/images/chrome.gif"); background-repeat: repeat-x; background-position: right top; margin-right: 200px; }

Watch GIF Try It Now

CSS Background Image repeat Vertically Example

To repeat the css background-image vertically you need to specify background-reapt property as repeat-y like this: background-repeat: repeat-y;

body { background-image: url("/images/chrome.gif"); background-repeat: repeat-y; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now

If we do not want our background images to repeat or tile, we'll need to use the value "no repeat" like this background-repeat: no-repeat; no repeat places the image once in the top left corner and it does not repeat it in any direction.

body { background-image: url("/images/chrome.gif"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; }
Watch GIF Try It Now
Browser compatibility

Feature
Basic support	1.0	1.0	1.0 (1.7 or earlier)[1]	3.5	4.0	Yes	Yes
Multiple backgrounds	1.0	1.3	3.6 (1.9.2)	yes	9.0	Yes	Yes
Gradients	1.0	4.0	3.6 (1.9.2)	11+	10	yes	yes
SVG images	8.0	5.0 [2]	4.0 (2.0)	9.5	9.0	Not supported	yes
element	?	Not supported	(Yes)	9.5	Not supported	Not supported	yes
image-rect	Not supported	Not supported	(Yes)	Not supported	Not supported	Not supported	yes

Other CSS Background Properties you might want to Learn

CSS Background Color Properties

CSS Background Repeat Property

CSS Background Attachment Property

CSS Background Properties



Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM