When I set background-image for body tag, it's like I've done that for HTML tag
Question
I have this HTML page and I set the background-image property for my body tag in main.css file:
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU"); background-size: 100% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
But in the browser the image is displayed like it's the HTML background-image property. I mean it fills the whole browser window and not just body portion? How can I fix it so that the image just fills the body portion?
4 answers
solution1
3 ACCPTED 2021-04-03 09:38:23
You need to explicitely set a background to html to avoid the background propagation
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU"); background-size: 100% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; } html { background:#fff; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
solution2
0 2021-04-03 06:20:06
Here's the JS fiddle with your problem solved.
https://jsfiddle.net/6u2bmpy9/4/
The background-size: 100% 100% property was leading the image to take up the whole viewport space.
I have modified a few CSS properties in your code to make it work. I gave the background image the same dimensions as your <body> tag's properties, and adjusted the background-position to fit it in the body
body{
border: 1px dashed orangered;
margin: 0 auto;
width:90%;
height:500px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU");
background-size: 90% 500px;
background-origin: border-box;
background-repeat: no-repeat;
background-position: 50%;
}
solution3
0 2021-04-03 06:28:01
As you can see, background image stretched to 100% width/height of the body content but is repeated below it.
Simply add the background-repeat: no-repeat; as:
body {
border: 1px dashed orangered;
margin: 0 auto;
width: 90%;
height: 500px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU");
background-size: 100% 100%;
background-origin: border-box;
background-repeat: no-repeat;
}
solution4
0 2021-04-03 12:13:27
I this case you need to simply set the background-size: 90% 100%; exectly as the body width is set to 90%.
body{ border: 1px dashed orangered; margin: 0 auto; width:90%; height:500px; background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTK7PRtGXnzNGOYQkswiaINU_VetoVdDmK53Q&usqp=CAU") top center no-repeat; background-size: 90% 100%; background-origin: border-box; } div{ border: 5px dashed green; margin: 50px; padding: 30px; }
<.DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="styling/main.css"> <title>Title</title> </head> <body> <div>hello world!</div> </body> </html>
Or add separately the html as well as the body to CSS to avoid the misunderstanding to browser. Then you can set background-size: to 100% 100%, but in this case you must also add the html tag to CSS "html{background-color:#FFF}"...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.