CSS - Background Image

The background-image property in CSS is used to set the background image for an HTML element.

Let us understand it with the below example.

Background Image using the background-image property

Example :

<html>
<head>
	<style>
		body {
  			background-image: url("my_image.png");
  		}
	</style>	
</head>
	
<body>
	<p> 
		This is the first paragraph.
	</p>
</body>
</html>

Output :

So, in the above example, we have an image my_image.png and we want to set it as background image for the <body> element.

And we have used the background-image property in the CSS property to set the background image for the <body> element.

<style>
	body {
		background-image: url("my_image.png");
	}
</style>

Now, just note that although the background image is set for the <body> element, however it is repeated all over the <body> element.

And CSS provides a solution for that. Let us see that in the next tutorial.

❮❮ PREV NEXT ❯❯