1

I have a simple markup with just a body with nothing in it, when I style the body like this:

body {
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
    margin: auto;
}

In stead of just filling the body the whole screen is filled up with the background-color, it doesn't make any sense to me, is this some crazy CSS weirdness?

tadman
  • 208,517
  • 23
  • 234
  • 262
Roy van Vugt
  • 21
  • 2
  • Just indent with four spaces for code formatting or highlight and click the `{}` button. – tadman Mar 20 '18 at 18:04
  • 2
    The `body` is different from other HTML elements in that it's the document itself. If you want only part of the screen a different color, consider using a `
    ` within that.
     – tadman Mar 20 '18 at 18:04
  • What do you mean “the whole screen”? Are you in full-screen mode? Otherwise there’s no way for the browser to escape its app window. – Dave Newton Mar 20 '18 at 18:05
  • @tadman, it seems weird to me, I mean I can give the body a width and a height but the background-color won't follow it. Now I have to make an extra container div, seems wasteful to me. – Roy van Vugt Mar 20 '18 at 18:11
  • @Dave Newton, of course I'm talking about the whole app window, as in not just the width and height of the body. – Roy van Vugt Mar 20 '18 at 18:11
  • Welcome to CSS where the rules are made up and the points don't matter. This is just *one* of the things you'll need to simply accept and move on. Sorry. – tadman Mar 20 '18 at 18:12
  • there's some good information here that might help you understand better: https://stackoverflow.com/questions/11995392/height-and-width-on-html-and-body-elements – jayly Mar 20 '18 at 18:13
  • 1
    @tadman, haha I will, thanks anyway! – Roy van Vugt Mar 20 '18 at 18:16
  • 1
    @tadman `This is just one of the things you'll need to simply accept and move on. Sorry` --> it's one thing we should understand then move on ;) – Temani Afif Mar 20 '18 at 19:37

5 Answers5

3

Refer to https://www.w3.org/TR/CSS2/colors.html#background

Basically, if the background of your HTML is not specified, it is "transparent". And it will use the background-color of the BODY if present.

I believe it will be easier to set a bgcolor for the HTML:

html{background-color: white;}

body {
    width: 200px;
    height: 200px;
    background-color: black;
    margin: auto;
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Rantanen
  • 156
  • 5
0

Create a div in your body and style that.

#body{
  margin:auto;
  width:250px;
  height:250px;
  background-color:antiquewhite;
}
<html>
  <body>
    <div id="body">

    </div>
  </body>
</html>
Echtniet
  • 200
  • 2
  • 11
0

The <body> element contains all the contents of an HTML document, such as: text, hyperlinks, images, tables, lists, etc.

If you want to change the color of the body you will change it for the whole screen, but if you want to change the background color only of a piece of your screen you can divide the body by using div elements, sections, etc.

This is an example of a structure:

header
{
  height:50px;
  background-color:red;
}
section
{
  height:500px;
  background-color:blue;
}
footer
{
  height:50px;
  background-color:green;
}
<body>
 <header>
  
 </header>
 <section>

  
 </section>
 <footer>
  
 </footer>
</body>
tadman
  • 208,517
  • 23
  • 234
  • 262
Marius Vuscan
  • 170
  • 1
  • 2
  • 16
0

By calling <BODY> tag in the css file you are including the whole interface of your web browser. So, it is obvious that the whole screen will be filled with the selected color.

My suggestion would be that, it would be better if you can divide the body into header and footer or use div with a class or ID to adjust the portion you want to color.

Charles
  • 1,121
  • 19
  • 30
VICTOR BASU
  • 7
  • 1
-2

Just add this snippet to your code in css file

html{
   background-color:white;
}
G.Meher
  • 20
  • 3