CODEWITHSUNDEEP
htmlcss
Srackoveryflow_guy
Srackoveryflow_guy

Reputation: 397

Best way to implement background image on HTML or body

I have an image which i need to stretch whole body so i don't know what is best way to do this 

html{
  /*background image properties*/
}

or 

body{
  /*background image properties*/
}

Upvotes: 25

Views: 52942

Answers (12)

Gerwin
Gerwin

Reputation: 1612

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

Upvotes: 36

muhammad irvan BM
muhammad irvan BM

Reputation: 1

put it between the body tags, sample code below Set two background images for the element:

body {
  background-image: url("img_tree.gif"), url("paper.gif");
  background-color: #cccccc;
}

The full manual can be read here CSS background-image Property

Upvotes: 0

Supriya
Supriya

Reputation: 581

.bk
{
  background: url('../assets/imgs/img.jpg') no-repeat center center fixed;
  }

Upvotes: 0

Özay Akbaş
Özay Akbaş

Reputation: 9

background:no-repeat url(' ') #154454 bottom center ;
background-size:contain;


body {
    background-image: url(/_assets/img/zoom-17536689-3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

Upvotes: 0

Chameena Hiruni
Chameena Hiruni

Reputation: 52

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

Upvotes: 1

Gatsby
Gatsby

Reputation: 765

The CSS3 background-size:cover property handles full screen background images, including responsivity, quite well. The below works well for me on all desktop and mobile devices I've tested.

body { 
    background-image: url(/assets/img/yourimage.jpg); 
    background-repeat: no-repeat; 
    background-position: center;
    background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    width:100%; 
}

Upvotes: 0

ULLAS MOHAN.V
ULLAS MOHAN.V

Reputation: 1531

Try this code :

<!DOCTYPE HTML>
<html>
<head>
<title>Background to fit screen</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Imagetoolbar" content="no">

<style type="text/css">
/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>
</html>

Example : Check this

Upvotes: 0

Abhitalks
Abhitalks

Reputation: 28437

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;
...

.

Upvotes: 3

Naeem Shaikh
Naeem Shaikh

Reputation: 15725

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%;

Upvotes: 1

Ahosan Karim Asik
Ahosan Karim Asik

Reputation: 3299

You can use 

body{
background: url("http://upload.wikimedia.org/wikipedia/commons/1/1a/Bachalpseeflowers.jpg") no-repeat scroll 0 0 #fff;
}

Upvotes: 0

U r s u s
U r s u s

Reputation: 6978

You should target the body tag and apply the background-size property to it.

Like so 

body{
background-size: 100%;
}

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

Semantically, I would use in body.

body{
  background-image: url(path.jpg);/*wearing a cloth in body instead of heart*/
}

Seems to be applied in whole body semantically.

Upvotes: 0

Related Questions