CSS Background Image Property

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





CSS Background Image Property

The CSS background-image property is used to set a specific image as a background, instead of styling it. We need to give the filepath (URL) of the image

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
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
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.



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

Example

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;


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;



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.


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