Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

background color for body element with predefined height in css

Tags:

html

css

I have a html page which looks like this

body {
  height: 200px;
  background-color: lightblue;
  padding: 0px;
  border: 1px solid red;
}
<html>

<head>
</head>

<body>
  <p> First para </p>
  <p> Second para </p>

</body>

</html>

Here I specified body height as 200px and background-color for body element as "lightblue". Why is the background-color for body getting applied to the whole page and not only 200px height of the body?

like image 493
Rekha Avatar asked May 30 '17 12:05

Rekha


People also ask

What happens if color property is applied to the body element?

The body element is the root-element, and thus, as required by the CSS rules it loses its background style and the background style is applied to the containing canvas (the webpage area in the browser), therefor the entire screen is blue. The other properties stay with the element (e.g. the border ).

How do you add a background color for all elements in CSS?

How to Add Background Color in HTML. To add background color in HTML, use the CSS background-color property. Set it to the color name or code you want and place it inside a style attribute. Then add this style attribute to an HTML element, like a table, heading, div, or span tag.

What is the CSS code for background color?

Background-color values can be expressed in hexadecimal values such as #FFFFFF, #000000, and #FF0000. Background-color values can be expressed using rgb such as rgb(255,255,255), rgb(0,0,0), and rgb(255,0,0).

How do you add a background color to your body?

To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.


1 Answers

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Source: css-tricks.com

So, to prevent this, you can simply define background-color:white for html.

html {
  background-color: white;
}

body {
  height: 200px;
  background-color: lightblue;
  padding: 0px;
  border: 1px solid red;
}
<html>

<head>
</head>

<body>
  <p> First para </p>
  <p> Second para </p>

</body>

</html>
like image 119
IiroP Avatar answered Nov 05 '22 16:11

IiroP