Geek Answers Handbook

The best way to implement a background image in HTML or body

I have an image that I need to stretch to the whole body, so I do not know what is the best way to do this

html{ /*background image properties*/ }

or

 body{ /*background image properties*/ }
+7
css html5 css3
source share
8 answers
 body{ background-image:url('../images/background.jpg'); background-attachment:fixed; background-repeat: no-repeat; background-size: cover; }

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

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

Assuming your css file is on a different map, you do .. / to go to the map where your css folder is located, then go to the image file and select an image.

 background-attachment:fixed;

When setting a background image that I personally like, I make sure that when the user scrolls, the background image retains its current position.

 background-repeat: no-repeat;

When using this option, it makes the image not repeat if it is too small or just does not cover the entire background.

 background-size: cover;

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

+13
source share
 body{ /*background image properties*/ }

this would be the best way, since the body is the immediate parent of all the elements that are visible on the web page.

http://jsfiddle.net/hxyz2evq/

You can use background-size:contain; to cover the entire area with a 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 There is also a case that I think of:

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

here some free data will be displayed inside the web page, i.e. inside the body , so we don’t want to provide the html tag background property,

just using body{//background properties } excellent [/ p>

 Edit:

Although it is not a question of which property should be used here. There may be things like:

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

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

+1
source share

In accordance with CSS 2.1 specifications: http://www.w3.org/TR/CSS2/colors.html#background

However, for HTML documents, we recommend that authors specify a background for the BODY element, not an HTML element. For documents whose root element is an HTML "HTML" or XHTML element, an "html" element that evaluates the transparent values ​​for background-color and none for background-image, user agents should use the calculated value instead The properties of the background from this element are the first HTML element "BODY" or the "body" element of the XHTML element when drawing backgrounds for the canvas and not painting the background for this child element ....

Therefore recommended use background on body (not html ).

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

 background-size: 100% 100%;

If you want to keep the aspect ratio, you can use cover to cover the full container, or use contain to keep it within the border of the container. When you use contain , then, depending on the aspect ratio of the background image, you may end up in white space below or after the end of the image (mailbox).

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

.

+1
source share

Semantically, I would use in the body.

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

It seems to be semantically applied throughout the body.

0
source share

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

Thus

 body{ background-size: 100%; }
0
source share

you can use

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

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 it out

0
source share

CSS3 background-size: cover handles full-screen background images, including responsiveness, pretty well. Below everything works well for me on all the desktop and mobile devices I 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%; }
0
source share

More articles:


All Articles