When I set background-image for body tag, it's like I've done that for HTML tag

user_15525272 0
Viewed 76

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?

css html
4 Answers

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>

user_86203330

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;
}
user_68599790

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}"...

user_22829740

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%;
}
user_108196420
Related