CSS background-image Property

The background-image property in CSS asserts one or more background images on one or more elements. The background images are basically drawn on stacking the context layers on top of each other. The first specified layer is drawn in a way as if it is closest to the user.

The borders of the element are drawn on top of them and the background-color is drawn beneath them. In case a specified image can not be drawn, browsers handle it like a 'none' value.

Note: Even if images are opaque or the color will not be displayed in normal circumstances, we should always specify a background-color. Hence, the background color will be used as a fallback in case the networks go down and the images are not able to be loaded.

Syntax

 <bg-image> = none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<paint()> = paint( <ident>, <declaration-value>? )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>where <image-tags> = ltr | rtl<image-src> = <url> | <string><color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><id-selector> = <hash-token><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop><ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]<angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage>

Every background image is specified in either of the two ways- either as the keyword 'none' or as an 'image' value.

Example: CSS background-image Property

Here in the example below, we are using the background-image property with different background images, borders, and their different values. In this case, we have given the background-image to the object using the statement <url("https:......)>. In the space given, we need to give the image link. The CSS styling is done inside the opening and closing head tags of the HTML. You have the choice to give any title to your program and you can also indent your text and object according to your selection of colors or styles or variants, etc. The CSS is embedded inside the HTML code with the code <style type="text/CSS> using the starting and closing <style> tags. And within the 'body' tag, you are required to give the text, paragraphs, etc.

<!DOCTYPE html>
<head>
	<title>CSS background-image</title>
	<style type="text/css">
		p {
		  font-size: 1.5em;
		  color: #FE7F88;
		  background-image: none;
		  background-color: transparent;
		}		
		div {
		  background-image:
		      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
		}		
		.catsandstars {
		  background-image:
		      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
		      url("https://mdn.mozillademos.org/files/7693/catfront.png");
		  background-color: transparent;
		}
	</style>
</head>
<body>
	<div>
		<p class="catsandstars">This paragraph is full of cats
			<br />and stars.</p>
		<p>This paragraph is not.</p>
		<p class="catsandstars">Here are more cats for you.
			<br />Look at them!</p>
		<p>And no more.</p>
	</div>
</body>
</html>

Output

Example: CSS background-image with none value

In the example below, we are using the background-image property with different background images, borders, and their different values. In this case, we have given the background-image to the object by using the statement <url("https:......)>.

In the space given, we need to give the image link. But in this case, we have given the value as 'none' i.e; we have given no background image to one of the objects.

<!DOCTYPE html>
<head>
	<title>CSS background-image</title>
	<style type="text/css">
		p {
		  font-size: 1.7em;
		  color: #1c8c0f;
		  background-image: none;
		  background-color: transparent;
		}
		
		div {
		  background-image: none;
		}
		
		.catsandstars {
		  background-image:		      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),		      url("https://mdn.mozillademos.org/files/7693/catfront.png");
		  background-color: transparent;
		}
	</style>
</head>
<body>
	<div>
		<p class="catsandstars">This paragraph is full of cats
			<br />and stars.</p>
		<p>This paragraph is not.</p>
		<p class="catsandstars">Here are more cats for you.
			<br />Look at them!</p>
		<p>And no more.</p>
	</div>
</body>
</html>

Output

Live Example

Here in this live example, you can easily test the live coding and execute the example using different values or edit the coding and create your own example.

Browser Compatibility

The term 'browser compatibility' indicates the ability of a particular website to appear fully functional on several browsers, available in the market. This means that the HTML coding of the website and the scripts on that website must be compatible to run on the browsers. It is of immense importance today when there is a large variety of web browsers available.

Conclusion

The initial value for the background-image property is 'none'. This property is applicable to all elements and also to '::first-letter' and '::first-line'. This property is not an inherited one. The computed value for the background-image is the specified one while with the 'url()' values, they are absolute. The animation type for the background-image is 'discrete'.