CSS Background Image


In CSS, the background image property is used to set one or more background images for an element. A background-image by default, is placed at the top-left corner of an element, and repeated both vertically and horizontally i.e. x-axis and y-axis.

It is a good practice to set the background to be used if the image is unavailable.


Syntax:


<style>
body {
  background-image: url|none|initial|inherit;
}
</style>


URL


URL is the path to the background image. To specify multiple background images, separate the urls with a comma.


Example:


<style>
body {
  background-image: url("birds.png"), url("sky.jpg");
  background-repeat: no-repeat;
  height: 500px;
}
</style>
Live Demo!


Output:


NONE


This is the default value and this means that no background image will be displayed.


Syntax:


<style>
body {
  background-image:none;
}
</style>


INITIAL


This sets the value of the property to its default value.


Syntax:


<style>
body {
  property: initial;
}
</style>


INHERIT


This specifies the property to inherit its value from the parent element.


Syntax:


<style>
body {
  property: inherit;
}
</style>


LINEAR GRADIENT


This one sets a linear gradient as the background image. It is necessary to define at least two colors for this to work (top to bottom).


Syntax:


<style>
body {
  background-image: linear-gradient(red, yellow, green);
}
</style>
Live Demo!


Output:

This is just a sample text with linear gradient in the background.



RADIAL GRADIENT


This sets a radial gradient as the background image. It is necessary to define at least two colors for this to work (center to edges).


Syntax:


<style>
body {
  background-image: radial-gradient(red, yellow);
}
</style>
Live Demo!


Output:

This is just a sample text with radial gradient in the background.



Example:


<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-image: url("img/car.jpg");
  background-color: #cccccc;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 250px;
}
</style>
</head>
<body>

<h1>The background-image Property</h1>
<p>Hello World!</p>

</body>
</html>
Live Demo!


Output:

The background-image Property

Hello World!