CSS background-image

CSS background-image Property

CSS background-image property sets the background with specified image or gradient values for HTML Element(s).

The syntax to specify a value for background-image property is

background-image: value;

The following table gives the possible values that could be given to background-image property.

Value	Description
url(‘URL‘)	The URL to the image. More than one image can be specified by separating the URLs with a comma.	background-image: url(“sample-image.jpg”);
none	No background image.	background-image: none;
linear-gradient()	Sets a linear gradient as the background image.	background-image: linear-gradient(red, blue);
radial-gradient	Sets a radial gradient as the background image.	background-image: radial-gradient(red, blue);
repeating-linear-gradient	Repeats a linear gradient.	background-image: repeating-linear-gradient(red, blue);
repeating-radial-gradient	Repeats a radial gradient.	background-image: repeating-radial-gradient(red, blue);
initial	Sets this property to its default value.	background-image: initial;
inherit	Inherits this property from its parent element.	background-image: inherit;

The default value of background-image is none.

Examples

In the following examples, we try out background-image with different values.

background-image with URL

In the following example, we apply an image, specified by URL, as background, for a div element.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: url('https://www.tutorialkart.com/sample_image.jpg');
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

If the size of background is less than the size of HTML Element, then the background image is repeated along both X and Y axis.

Example

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: url('https://www.tutorialkart.com/sample_image_small.jpg');
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

background-image with linear-gradient

In the following example, we set background-image property with linear-gradient() value. Two color values are given to linear-gradient().

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: linear-gradient(green, yellow);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

In the following example, we passed four colors to linear-gradient().

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: linear-gradient(green, yellow, orange, gray);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

background-image with radial-gradient

In the following example, we set background-image property with radial-gradient() value. Two color values are given to radial-gradient().

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: radial-gradient(green, yellow);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

background-image with repeating-linear-gradient

In the following example, we set background-image property with repeating-linear-gradient() value.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: repeating-linear-gradient(blue 5%, skyblue 10%, gray 5%);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

background-image with repeating-radial-gradient

In the following example, we set background-image property with repeating-radial-gradient() value.

index.html

</>

Copy

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        div {
            height: 200px;
            width: 400px;
            line-height: 200px;
            text-align: center;
            font-size: 50px;
            color: white;
        }
        #div1 {
            background-image: repeating-radial-gradient(blue , skyblue 10%, gray 5%);
        }
    </style>
</head>
<body>
    <div id="div1">Hello World</div>
</body>
</html>

Conclusion

In this CSS Tutorial, we learned about background-image property, and how to use this property for HTML Elements, with examples.

TutorialKart

CSS background-image