skip to Main Content

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;
Back To Top
Search