CSS Background Image
The background-image property defines an image that we wanna use as the background of an element.
Here is how you can add the background image for any element.
body {
background-image: url("https://crus4.com/wp-content/uploads/2022/11/background.jpg");
}Now let’s put the same code in the below example to see the results.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://crus4.com/wp-content/uploads/2022/11/background.jpg");
}
</style>
</head>
<body>
<h1>Hello Developers!</h1>
<p>This whole page has an image as the background.</p>
</body>
</html>
Similarly, we can also set the background image for any element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
background-image: url("https://crus4.com/wp-content/uploads/2022/11/background.jpg");
}
</style>
</head>
<body>
<h1>Hello Developers!</h1>
<h3>This heading has an image as the background.</h3>
<p>You can see that the background image is only set to the above heading.</p>
</body>
</html>
Note:- When you set the background image, make sure the user can clearly read the text.
CSS Background Image
