| Author |
Topic: CSS Background |
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
 |
|
|
| CSS Background |
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 »
|
|
|
|
|
|
|
CyberSpider
member
offline  |
| |
| posts: |
47 |
| joined: |
04/10/2016 |
| from: |
San Francisco, CA |
|
|
|
|
|
| Multiple Backgrounds |
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;
}
Try it yourself in sandbox »
|
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 04/14/2016 05:08:10 PM
Edit
Quote
Report
Profile
Reply