Menu
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?
493
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 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.
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).
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.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
