| |
Multiple Backgrounds |
|
|
Subject: Multiple Backgrounds
Author: CyberSpider
In response to: CSS Background
Posted on: 04/14/2016 06:36:51 PM
Multiple CSS backgrounds can be put together as a comma separated list:
body {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/4/42/Hermitthrush63.jpg),
url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/A_sunflower.jpg/125px-A_sunflower.jpg);
background-repeat: repeat-y, no-repeat;
background-attachment: scroll, fixed;
background-position: top right, 40px 20px;
}
>
> On 04/14/2016 05:08:10 PM CyberSpider wrote:
The CSS background property can be categorized as:
background-color -- #f00, rgba(), hsla(), red;
background-image -- none, url(http://www.example.com/bck.png);
background-repeat -- repeat, no-repeat, repeat-x/y, round, space;
background-clip -- border-box, padding-box, content-box;
background-attachment -- scroll, fixed, local;
background-position -- top, right, bottom, left, center, 0px, 0.2em;
For example:
body {
background-color: rgba(0,0,125,0.2);
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/A_sunflower.jpg/125px-A_sunflower.jpg);
background-repeat: no-repeat;
background-clip: border-box;
background-attachment: fixed;
background-position: 40px 20px;
}
All above properties can be put together under one roof:
body {
background: rgba(0,0,125,0.2) url(...) no-repeat border-box fixed 40px 20px;
}
Try it yourself in sandbox »
References:
|
|
|
|
