CSS Background Image

web development

Tuesday 30 March 2021

Hacker

web development

CSS Background Image

❮❮ Previous Next ❯❯

The CSS background image specifies a pointer to an image, which is placed in the background of an element.

The CSS background image property specifies an image to use as the background of an element.

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

CSS Background Image

Possible Values of CSS background image

url − URL of the image.
none − if background image to specify none means that no background image should be placed for matching elements.
transparent :

Syntax

background-image: url(img url);

Try it self »

The background image CSS property sets single or multiple background images on an element.

The background image property in CSS applies a graphics (e.g. JPEG, PNG, SVG, JPG, GIF, WEBP) or gradient to the background of the element.
There are two different types of images you can include with CSS as a background image :

regular images and gradients

Example of gradients

body {
background: radial-gradient(circle, black, white);
}

div {

background: linear-gradient(black, white);

}

Try it Yourself »

Note: When we are using a background image, use an image that doesn't disturb the text.

The background image can also be set for specific elements, like the <div> element:

Example

div {

background-image: url("paper.gif");

}

Try it Yourself »

Lets Try to understood CSS Background Image with full example

Example

<html>
<head>
<style>
body {
background-image: url("rahasyacommunity.png");
background-color: #cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
<html>

Try it Yourself »