0 Kč bez DPH

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.

Hanami Kyra
Vlastní box 1 #second
Vlastní box 2 #separator
Aktivní rubrika #blog
Náhodný obrázek - #random-image
Patička footer

Barva na pozadí

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

Barvu lze zadat:

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

Chcete nás kontaktovat?

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Ozvěte se mi

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

Chcete nás kontaktovat?

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Ozvěte se mi

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

Chcete nás kontaktovat?

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Ozvěte se mi

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

Chcete nás kontaktovat?

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Ozvěte se mi

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

Chcete nás kontaktovat?

Váš text začíná právě zde. Klikněte a můžete začít psát. Sed ut perspiciatis unde omnis iste natus error sit voluptatem

Ozvěte se mi

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.

Tým inPage
info@inpage.cz

Web s doménou ZDARMA

Přidat komentář