The CSS background property allows you to apply background colors and images to elements as required. But there are plenty of strange quirks and bugs that may surprise the unwary developer.
What is the background anyway?
The initial, or default, value of an element’s background is transparent—this allows an element to be placed on top of another element, and allows the background to shine through. It will not usually be necessary to declare this, unless you are overriding a previous background color that was set for this element.
The background of an element is the total width and height of the element, and includes the padding and borders that have been set on that element. It does not include the margins of the element. Therefore a background applied to an element will be underneath the foreground content of that element and include the padding, and it will also be underneath any borders that have been declared.