This blog will tell you how to add a background image with no-repeat property in HTML. Before you know how to add a no-repeat property to an image in HTML you need to know how to add a photo as the background of your website. So firstly let us learn about how to load an image as a background image. Downloadable Image Link of the image that I have used in this blog:- DOWNLOADNOW
Adding Background Image
To add a background image to your website, we will use the “background-image” property in the style attribute under the body tag. The syntax of it is <body style=”background-image:url(‘Image.png’);> where in the URL bracket you can add the URL/name of the image which you want to add to the website’s Background. Example:-
OUTPUT
As you can see the image is not properly set in the background. so to set this image properly in the background we need to set this with some of its properties. If the image size would be small then the image will repeat itself. So to avoid these types of mistakes we use the properties.
Background No-Repeat
To add a no-repeat property to the background we use the “background-repeat” property and set its value to no-repeat. We can add this property in the HTML/CSS file in any way. Inline, Internal, and External. We have set the background size to cover because if we will put any other value the image may not cover the background. The result in all three ways to add CSS is the Same. You can learn more about CSS. We have a detailed blog on it.
Inline CSS
OUTPUT
Internal CSS
External CSS
Hope this blog post was helpful to you and you have got the answer to your question. Thank you for visiting our blog. If you have any doubts about any coding questions then let us know in the comments section we will answer them as soon as possible. Till then check out our more blog posts.