Tomáš Daněk

Sdružená definice pozadí – background

Umožňuje zkrácený zápis všech vlastností pozadí:

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

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

Při použití sdružené definice jsou u neuvedených vlastností nastaveny výchozí hodnoty.

Barva pozadí – background-color

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

Obrázek na pozadí – background-image

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

Pozice obrázku na pozadí – background-position

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

Ekvivalentní zápisy:

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

Pokud uvedete pouze jednu hodnotu, druhá se automaticky nastaví na střed:

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

V jedné deklaraci nepoužívejte současně textové a číselné hodnoty.

Opakování obrázku na pozadí – background-repeat

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

Posouvání obrázku na pozadí – background-attachment

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

IE6- umožňuje použít hodnotu fixed pouze pro element body.

Velikost pozadí na pozadí – background-size

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

Průhlednost – opacity

Vlastnost průhlednosti nastavená na 30 % je definovaná pro IE, FireFox a ostatní moderní prohlížeče (černá barva pozadí je nepovinná).

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

Přechody – gradienty

Dokumentace viz W3C gradients.

Generátory gradientů vám mohou ušetřit mnoho času (podpora prohlížečů). Některé generátory umožňují např. i převádět obrázky gradientů na CSS. 

Lineární přechod – linear gradient

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

• horizontální nebo vertikální přechod dvou barev: IE6+
• přechod dvou barev o libovolném úhlu: IE9+
• přechod tří a více barev o libovolném úhlu: IE10+

Příklad vertikálního přechodu dvou barev:

.gradient {
  background-color: #bada55; /* background color if gradients are not supported */
  background-image:    -moz-linear-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-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Chrome10+ and Safari5.1+ */
  background-image:      -o-linear-gradient(top, #bada55 0%, #2a562c 100%); /* Opera(11.1 to 12.0) */
  background-image:     -ms-linear-gradient(top, #bada55 0%, #2a562c 100%); /* pre-releases of IE10 */
  background-image:   linear-gradient(to bottom, #bada55 0%, #2a562c 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bada55', endColorstr='#2a562c',GradientType=0); /* IE(6 to 9) */
}

Příklad přechodu dvou barev v úhlu 135°:

• Pro úplnou podporu multi-stop (více barev) gradientu v IE9 (pomocí SVG) je nutné pomocí podmíněného komentáře "zakázat" filtr.

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

.gradient {
  background-color: #1e5799; /* background color if gradients are not supported */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMWU1Nzk5IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdkYjllOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  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-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* Opera(11.1 to 12.0) */
  background-image: -ms-linear-gradient(-45deg, #1e5799 0%, #7db9e8 100%); /* pre-releases of IE10 */
  background-image: linear-gradient(135deg, #1e5799 0%, #7db9e8 100%); /* W3C standard, IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=1); /* IE(6 to 8) fallback on horizontal gradient ONLY */
}

Filtry - filter

Příklad odbarvení 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;
}

...