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>

Copy the Code and Run it Here

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>

Copy the Code and Run it Here

Note:- When you set the background image, make sure the user can clearly read the text.

Previous

Next

CSS Background Image