CODEWITHSUNDEEP
htmlbackgroundbackground-image
user8179033
user8179033

Reputation: 11

HTML background no repeat

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?

Upvotes: 1

Views: 13451

Answers (3)

Khaled Ayed
Khaled Ayed

Reputation: 1287

background-repeat property should be what you need:

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

Upvotes: 0

Venator
Venator

Reputation: 352

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:

Upvotes: 3

Koby Douek
Koby Douek

Reputation: 16693

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.

Upvotes: 1

Related Questions