❮❮ PREV NEXT ❯❯

CSS - Background Repeat

If we want to get rid of the repetition of the background image, CSS provides us with a property called background-repeat.

We just have to set the value of background-repeat property to no-repeat and the image won't be repeated.

Using background-repeat for background-image

Example :

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

Output :

So, in the above example we have used the background-repeat property with the background-image property and image is not repeated.

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

Now, the background image is not repeated. However, with the background image having its original size, it became little smaller.

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

❮❮ PREV NEXT ❯❯