Vlastní pozadí bloků

Nevyhovuje vám podbarvení bloků v šabloně Kyra či Hanami? Přáli byste si mít v blocích na pozadí jinou barvu, barevný přechod či obrázek? S připravenými styly a popisem jejich použití jednoduše upravíte pozadí bloků ve vlastních CSS stylech.

Bloky, kterým lze změnit pozadí

Šablony Hanami a Kyra mají některé prvky společné. V tabulce níže je seznam bloků s jejich identifikátory, kterým lze měnit pozadí. Při změně pozadí dávejte pozor, aby text v bloku byl po změně pozadí čitelný. Jinak je třeba upravit i barvu textu, nadpisů, odkazů a dalších prvků v něm obsažených. Pokud si nejste jistí prvkem, který si přejete upravit, mrkněte do článku Rozložení prvků v responzivních šablonách, kde jsou graficky znázorněny.

Barva na pozadí

Barvu pozadí jednoduše upravíte vlastností background-color a uvedením barvy.

Barvu lze zadat:

• názvem barvy v anglickém jazyce (např.: black; white; red; yellow;), zde najdete kompletní seznam barev
• jedinečným hexadecimálním kódem barvy (např.: #ffffff; #d00000; #eee;), tabulka kódů barev

Zápis CSS stylu

#second {
background: #73be1e;   /*barva pozadi*/
color: white;         /*barva textu v bloku*/
}

Úprava prvků v bloku

Barvu textů v bloku můžete upravit přímo v editoru stránky nebo CSS stylem. V případě použití CSS stylů uveďte vždy před prvek, který si přejete v bloku změnit jeho identifikátor, jinak by se Vám úprava mohla promítnout do celého webu.

#second  h1  {   /*Nadpis 1*/
color:#ffffff;   /*barva textu*/
}

#second a {     /*odkaz*/
color:#ffffff;  /* barva textu */
}

Další možnosti úprav textu naleznete v článcích  Jak změnit barvu, velikost nebo typ písma a CSS uživatelské základy.

Ukázka

Přechod na pozadí

Přechod je možné si vygenerovat s pomocí online generátoru např. CSS Gradient Generator. Kde si vyberete styl přechodu, upravíte barvu, směr přechodu a další.

Jakmile máte přechod vygenerovaný, stačí zkopírovat kód z části CSS kliknutím na tlačítko Copy, vložit do vlastních CSS do specifikace vybraného prvku a uložit.

Zápis CSS stylu

#second {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e6f0a3+0,d2e638+50,c3d825+51,dbf043+100;Green+Gloss+%232 */
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top,  #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */

}

Ukázka

Obrázek na pozadí

S obrázkem na pozadí si lze vyhrát a můžete si vyzkoušet i různé možnosti. Základem je nahrát si obrázek do administrace. V editaci obrázku zjistit jeho URL adresu v části SEO. Pak již stačí zkopírovat styl a upravit adresu obrázku ve vlastnosti background.

Zápis CSS stylu

#second {
  background: url(/obrazek/3/bg-obrazek-na-pozadi-png/);       /*adresa obrazku*/
  background-repeat: no-repeat;                                /*obrazek se nebude opakovat*/
  background-position: center;                                 /*vystredeni obrazku*/
  background-size: cover;                                      /*obrazek pokryje prvek i za cenu oriznuti*/
}

Ukázka

Fixní obrázkové pozadí

Výchozí nastavení vlastnosi ackground-attachment je scroll. Tedy při posunu stránky se posouvá i pozadí. Při nastavení této vlastnosti na fixed, zůstává pozadí stát. To nám pak v jednotlivých blocích udělá pěkný efekt.

#second {
  background: url(/obrazek/3/bg-obrazek-na-pozadi-png/); /*adresa obrazku*/
  background-repeat: no-repeat;                                /*obrazek se nebude opakovat*/
  background-position: center;                                 /*vystredeni obrazku*/
  background-size: cover;                                      /*obrazek pokryje prvek i za cenu oriznuti*/
  background-attachment: fixed;                                /*fixni pozadi*/
}

Ukázka

Skládané obrázkové pozadí

Jsou obrázková pozadí, která se při jejich skládání vedle sebe vytvoří tapetu. Pro toto skládání je třeba mít vlastnost background-repeat na hodnotu repeat. Opět existují weby, kde si lze tyto obrázky stáhnou zdarma např. backgroundlabs.com

#second {
  background: url(/obrazek/3/bg-skladane-pozadi-png/);
  background-repeat: repeat;
}

Ukázka

Doufáme, že se vám článek líbil a že vám přijde vhod při úpravách a vytváření webových prezentací v systému inPage.