best way to implement background image on HTML or body

body{
  /*background image properties*/
}

this would be the best way, since body is the immediate parent of all elements which are visible on the webpage.

http://jsfiddle.net/hxyz2evq/

You can use background-size:contain; to cover all the area with background image

body{
width:500px;
    height:500px;
    background:url(http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg);
    background-cover;
    background-repeat:no-repeat;
}

Note: Also there is a case I think of:

<html>
    <head>
        some free data
    </head>
    <body>

    </body>
</html>

here the some free data will get displayed inside the webpage, i.e inside body, so we wouldnt care about giving the background property to html tag,

just using body{//background properties } is fine

Edit:

Though this is not the question for what property should be used here. There can be various things like: 

background-size:cover;
OR
background-contain;
OR
background-100% 100%;

The best property which suits your question would be background-100% 100%;


body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

This would be the best way, you could apply it to the HTML, it really depends on what you prefer...

background-image:url('../images/background.jpg');

Assuming your css file is in a different map, you do ../ to go to the map in which your css folder is placed, then you go into the images file and select the image.

background-attachment:fixed;

When setting a background-image I personally like to use this, it makes it so that when a user scrolls, the background-image maintains it's current position.

background-repeat: no-repeat;

When using this setting, it makes it so that the image won't repeat, in case it is too small or just won't cover the whole background.

background-size: cover;

When you apply this you will set the background-size to cover, combined with no-repeat and attachment: fixed it makes for a good way to style your background image


body{
    background-image:url('../images/background.jpg');
    background-attachment:fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

As per the CSS 2.1 Specs here: http://www.w3.org/TR/CSS2/colors.html#background

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element....

Hence, it is recommended to use a background on body (rather than on html).

If you want a background-image to stretch the whole container (i.e. body), then you could use the style:

background-size: 100% 100%;

If you want to preserve the aspect ratio, then you could use cover to make it cover the full container, or use contain to keep it within the container boundary. When you use contain, then depending on the aspect ratio of the background image, you could end up with white-space below or after the image ends (letterbox).

background-image: url('...');
background-size: cover;
background-repeat: no-repeat;
...

.

Tags:

Html

Css

Recent Posts