How to add background image in CSS
CSS is all about presentation. Discover how How to add background image in CSS works to transform plain HTML into a premium user experience in the guide below.
The CSS property background-image is employed to designate an image as the backdrop of an element. By utilizing this CSS property, it is possible to assign either a single or multiple background images to an element.
By default, the image is placed in the upper-left corner of a container and repeated in both horizontal and vertical directions. It's essential to select a background image that complements the text color. Inappropriately pairing text with a background image can result in a poorly designed webpage that is difficult to read.
The url function within this CSS property enables the insertion of a file path to an image, displaying it as the background of the element. It is possible to incorporate multiple images or a combination of gradients and images for the background. In cases where the background-image fails to load or when gradients are unsupported by the browser, a fallback value can be specified to serve as the background color for the element.
Syntax
background-image: url();
Values
The URL function specifies the web address of an image. Multiple URLs can be included by separating them with commas to indicate more than one image source.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("cat.png");
background-color: lightgray;
}
</style>
</head>
<body>
</body>
</html>
Output
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, green, yellow); }
</style>
</head>
<body>
</body>
</html>
Output
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url("lion.png");
}
</style>
</head>
<body>
</body>
</html>
Output
