Prevent background image repeat in CSS

• A background image gets repeated when its size is smaller than the element in which we place it. This is shown in the below example.

<style>

body{

                 background-image:url(‘abc.jpg’);

          }

</style>

• Now the image will be repeated as shown below in output:

• 

• So to avoid such image repetition,  we can use another CSS property as shown below:

<style>

body{

background-image:url(‘abc.jpg’);

 background-repeat:no-repeat;

}

</style>

• As shown above, we need to use the background-repeat property and set its value to no-repeat to avoid image repetition.
• The output will be now as shown below:

•