HTML background no repeat

Question

How to fit a background image in html without it repeating to cover the whole page? Is there a HTML code for it or do I have to use a CSS code?

Answer 1

There are two CSS properties you can use to control the size and repetition of a background image:

• background-repeat
• background-size

In order to set as a background image that covers the target element, you would use the values no-repeat and cover, like such:

targetelement {
  background-image:url('example.jpg');
  background-repeat:no-repeat;
  background-size:contain;
}

If you'd like to learn more about these CSS properties and their possible values, have a look at these two pages:

• https://www.w3schools.com/cssref/pr_background-repeat.asp
• https://www.w3schools.com/cssref/css3_pr_background-size.asp

Answer 2

The best solution for your question is adding background-repeat:no-repeat or background-size: cover to your CSS or your element's style tag.

For example:

html { 
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

If you insist on using HTML only, you would have to resize the element according to your image, or the other way around. Your question refers to a page's background image, so for my openion CSS or style is the only way to achieve this.