CSS - Background

About

The background of an element is the total size of the element:

When two element overlap, you can send one element to the background by setting the z-index

Properties

All properties that start with the prefix background are background properties.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right; 
background-origin: border-box, content-box;
background-repeat: no-repeat;
background-color: white
background-clip: border-box;
background-attachment: fixed;
background-size: cover; /* scale the background image proportionally so that its width and height are equal to, or greater than, the width/height of the element. */

More Documentation Reference - CSS Background 3

Demo

Background vs margin and padding

This demo helps to visualize the effect of margin and padding against the background limits with a light color against a dark color for the document.

You will see that only the margin has an effect on the background area.

  • The CSS
.backgroundWithPadding {
    background-color: SkyBlue ;
    padding: 15px;
    border: 5px solid black;
}
.backgroundWithoutPadding {
    background-color: SkyBlue ;
    border: 5px solid black;
}
.backgroundWithPaddingAndMargin {
    background-color: SkyBlue ;
    border: 5px solid black;
    padding: 5px;
    margin: 10px;
}

body {
    background-color: steelblue;
}
  • The HTML
<div class="backgroundWithPadding" >
light blue background With Padding and Without Margin
</div>
<div class="backgroundWithoutPadding" >
light blue background Without Padding and Without Margin
</div>
<div class="backgroundWithPaddingAndMargin " >
light blue background With Padding and Margin
</div>
  • The result where you can see that only the margin has an effect on the background area

Powered by ComboStrap