Menu
I am completely new to html and css so my question could be very basic but hope you guys can help me udnerstnad,
I am using following css code
body
{
background-color:Olive;
width:550px;
font-family:Verdana;
}
I am setting width to 550px and as a result all my paragraphs contract to 550px but the background is applied to the whole page even beyond the 550px
I understand that because of inheritance the child elements would have inherited the width property from body, but I was thinking that if I set width property of body to 550px then background should be visible in 550px wide area and not the full page,
I don't get the logic here..
868
If you apply a color to the html, for example html { background-color: yellow; }, you'll see this is not the case at all. The <body> tag is special in that it is intended to encompass the entire contents of the HTML page. When you apply a background, then, the default is for it to paint the entire background page, unless htmls background has otherwise been set.
See this jsfiddle example. Like the other posters above, I highly recommend using a <div> element to wrap, size, and color your content.
This is described in the CSS2 specifications as so:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
94
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
