CSS background image examples

Background-image.css

/* The following sets a background image on an element using the shorthand property. */
.element {
    background: #eee url(path/to/image.jpg) top 50% / contain fixed no-repeat;
}
/* The above declaration is equivalent to the following single declarations: */
.element {
    background-image: url(path/to/image.jpg);
    background-color: #eee;
    background-position: top 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: padding-box; /* initial value */
    background-clip: border-box; /* initial value */
}
                
/* Another example and its equivalence: */
div {
    background: padding-box url(something.png) deepPink center center;
}
/* The single equivalence */
div {
    background-color: deepPink;
    background-image: url(something.jpg);
    background-repeat: repeat; /* initial */
    background-attachment: scroll; /* initial */ 
    background-position: center center;
    /* only one <box> value is specified in the shorthand 
    declaration, so both the background-origin and the 
    background-clip property get that value */
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto; 
}
                
/* The following example uses the background property shorthand to set multiple background layers on an element. */
.element {
    background: url(a.png) top left no-repeat,
                url(b.png) center / 100% 100% no-repeat,
                url(c.png) white;
}
/* The single properties equivalent to the above multiple-background example is the following: */
.element {
    background-image:      url(a.png),  url(b.png),          url(c.png);
    background-position:   top left,    center,              top left;
    background-repeat:     no-repeat,   no-repeat no-repeat, repeat;
    background-clip:       border-box,  border-box,          border-box;
    background-origin:     padding-box, padding-box,         padding-box;
    background-size:       auto auto,   100% 100%,           auto auto;
    background-attachment: scroll,      scroll,              scroll;
    background-color:      white;
}