Grafik digitálnych médií

Umožňuje skrátený zápis všetkých vlastností pozadia:

• background-color
• background-image
• background-position
• background-repeat
• background-attachement
• background-size

body {background: #cf3 url(../images/pozadi.jpg) top left repeat-x;}

Pri použití združenej definície sú pri neuvedených vlastnostiach nastavené východiskové hodnoty.

Farba pozadia – background-color

p {background-color: #cf3;}
#header p {background-color: transparent;}

Obrázok na pozadí – background-image

body {background-image: url(../images/pozadi.jpg);}
.zadny-obraziek {background-image: none;}

Pozícia obrázku na pozadí – background-position

body {
  background: url(../images/pozadi.jpg) no-repeat;
  background-position: centrum bottom; /* os x a os y */
}

Ekvivalentné zápisy:

• left top ~ 0% 0% ~ 0 0
• right bottom ~ 100% 100%

Ak uvediete iba jednu hodnotu, druhá sa automaticky nastaví na stred:

• 0 ~ left ~ left centier ~ 50% 50%
• 50% ~ centier ~ centier centier ~ 50% 50%
• 100% ~ right ~ right centier ~ 100% 50%
• top ~ centier top ~ 50% 0% ~ 50% 0
• bottom ~ center bottom ~ 50% 100%

V jednej deklarácii nepoužívajte súčasne textové a číselné hodnoty.

Opakovanie obrázku na pozadí – background-repeat

body {
  background-image: url(../images/pozadi.jpg);
  background-repeat: repeat-x; /* repeat-y, no-repeat, repeat */
}

Posúvanie obrázku na pozadí – background-attachment

body {
  background-image: url(../images/pozadi.jpg);
  background-attachment: fixed;
}

 IE6- umožňuje použiť hodnotu fixed iba pre element body .

Veľkosť pozadia na pozadí – background-size

body {
  background-image: url(../images/pozadi.jpg);
  background-size: cover ;
}

Priehľadnosť – opacity

Vlastnosť priehľadnosti nastavená na 30% je definovaná pre IE, FireFox a ostatné moderné prehliadače (čierna farba pozadia je nepovinná).

img {
  background-color: black;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity= 30 )"; /* IE8+ */
  filter: alfa(opacity = 30 ); /* IE5+ (order 1. "-ms-filter", 2. "filter" pracujúci v IE8′s emulating IE7 mode too) */
  opacity: 0.3 ;
}

Prechody – gradienty

Dokumentácia pozri W3C gradients.

Generátory gradientov vám môžu ušetriť veľa času (podpora prehliadačov). Niektoré generátory umožňujú napr. aj prevádzať obrázky gradientov na CSS. 

Lineárny prechod – linear gradient

Podpora: FF3.6+, Chrome, Safari4+, Opera11.1

• horizontálny alebo vertikálny prechod dvoch farieb: IE6+
• prechod dvoch farieb s ľubovoľným uhlom: IE9+
• prechod troch a viacerých farieb s ľubovoľným uhlom: IE10+

Príklad vertikálneho prechodu dvoch farieb:

.gradient {
  background-color: #bada55; /* background color if gradients nie sú podporované */
  background-image: -moz-lineár-gradient(top, #bada55 0%, #2a562c 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bada55), color-stop(100%,#2a562c)); /* Chrome, Safari4+ */
  background-image: -webkit-lineár-gradient(top, #bada55 0%, #2a562c 100%); /* Chrome10+ a Safari5.1+ */
  background-image: -o-lineár-gradient(top, #bada55 0%, #2a562c 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-lineár-gradient(top, #bada55 0%, #2a562c 100%); /* pre-releases of IE10 */
  background-image: linear-gradient(to bottom, #bada55 0%, #2a562c 100%); /* W3C štandard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); /* IE(6 až 9) */
}

Príklad prechodu dvoch farieb v uhle 135°:

• Pre úplnú podporu multi-stop (viac farieb) gradientu v IE9 (pomocou SVG) je nutné pomocou podmieneného komentára „zakázať“ filter.

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

.gradient {
  background-color: #1e5799; /* background color if gradients nie sú podporované */
/* IE9 SVG, potrebujú kondičný override of 'filter' to 'none' */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2 0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2ct PSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZQQ9IjAlIiBzdG9wLWNvbG9 dHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcm wIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background-image: -moz-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* FF(3.6 to 15) */
  background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #1e5799), color-stop(100%, #7db9e8)); /* Chrome, Safari4+ */
  background-image: -webkit-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Chrome10+,Safari5.1+ */
  background-image: -o-lineár-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-lineár-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* pre-releases of IE10 */
  background-image: linear-gradient( 135deg , #1e5799 0%, #7db9e8 100%); /* W3C štandard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); /* IE(6 až 8) fallback on horizontal gradient ONLY */
}

Filtre – filter

Príklad odfarbenia obrázku na pozadí:

.gray {
  background: url('../images/pozadi.jpg') no-repeat 0 0;
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */
   filter: gray; /* IE5+ */
   filter: grayscale(100%);
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gray:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}