BACKGROUND
Udvalgte CSS-koder
background-color
background-color: lightgrey;
Farvenavn
background-color: #4c9ebd;
HEX
background-color: rgb(255,140,0);
RGB
background-color: rgba(255,140,0,0.2);
RGBA
"a" betyder Alpha = Opacitet/ transparens/ gennemsigtighed.
a = 0.0: farvefladen er gennemsigtig
a = 1.0: farvefladen er fuldt dækkende
a = 0.2: 20%
background-image
background-image: url('http://dinsite.dk(...)dit-billede.png');
background-repeat
background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-attachment
background-attachment: scroll;
background-attachment: fixed;
background-position
background-position: center top;
background-position: right top;
background-position: right center;
background-position: right bottom;
background-position: center bottom;
background-position: left bottom;
background-position: left center;
background-position: left top;
background-position: center center;
background-size
background-size: 80px auto;
background-size: 80%;
background-size: cover;
background-size: contain;
linear-gradient
.gradient {
background: -webkit-linear-gradient(orange, #fff); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(orange, #fff); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(orange, #fff); /* Firefox 3.6 - 15 */
background: linear-gradient(orange, #fff); /* Standard syntax */
}
.regnbue{
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Fx 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
Shorthand properties
background-color, background-image, background-repeat og background-position kan koges ned til en CSS-linje, eksempel:
background-color: #000; background-image: url(images/bg.gif); background-repeat: no-repeat; background-position: top right;
Shorthand:
background: #000 url(images/bg.gif) no-repeat top right;
