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.