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.
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.
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.
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.
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.
In the above screenshot you can see only a single image is shown.
Congratulations you have restricted repeating background image using CSS.