The background-image property is used to set an image as a background of an element. By default the image covers the entire element. It sets one or more background images for an element.
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
The background of an element is the total size of the element, including padding and border (but not the margin).
The background image should be chosen according to text color.
The bad combination of text and background image may be a cause of poor designed and not readable webpage.
Syntax
background-image: ('url')|none|initial|inherit;
url(‘URL’)– This is the URL of image. To specify more than one image, separate the URLs with a comma.
none-No background image will be displayed. This is default value.
initial– Sets this property to its default value.
inherit– Inherits this property value from its parent element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://eywiah.com/wp-content/uploads/2021/12/image-1024x995.png");
margin-left: 100px;
}
</style>
</head>
<body>
<h1>Hello EyWiah.com</h1>
</body>
</html>