Heapcoding

How to restrict repeating background image in HTML

Published July 1, 2022

In this tutorial I shall show you how you can restrict repeating background image in html using css. Let’s start the tutorial without wasting your time.

Step 1 – Create a blank HTML document

First of all let’s create a blank html document.

How to restrict repeating background image in HTML

In the above screenshot you can see I have created a blank document.

Step 2 – Add background image in document

Now let’s add a background image in the document using css.

How to restrict repeating background image in HTML

In the above screenshot you can see I have added a background image to the body of the document using css.

Now let’s render the webpage in the web browser to see the changes.

How to restrict repeating background image in HTML

In the above screenshot you can see I have added a flower image in the background of the body.

Now you can see it is repeating. Let’s ristrect this repetition.

Step 3 – restrict repeating background image using CSS.

Let’s control the repetition of background image using CSS.

How to restrict repeating background image in HTML

In the above screenshot you can see I have added a property “background-repeat” and given the value “no-repeat”.

This will restrict the image to no more repeat.

Now let’s see the results in the web browser.

How to restrict repeating background image in HTML

In the above screenshot you can see only a single image is shown.

Congratulations you have restricted repeating background image using CSS.