Jak natahovat obrázek na pozadí pro přizpůsobení webové stránky

Dejte své webové stránky vizuální zájem s grafikou na pozadí

Obrázky jsou důležitou součástí atraktivních návrhů webových stránek. To zahrnuje použití obrázků na pozadí. Jedná se o obrázky a grafiku, které se používají za oblastmi stránky, na rozdíl od obrázků, které jsou prezentovány jako součást obsahových stránek. Tyto obrázky na pozadí mohou přidat vizuální zájem o stránku a pomohou vám dosáhnout vizuálního designu, který hledáte na stránce.

Pokud začnete pracovat s obrázky na pozadí, bezpochyby se dostanete do scénáře, kde chcete, aby se obraz natáhl tak, aby se vešel do stránky.

To platí zejména pro citlivé webové stránky, které jsou dodávány do široké škály zařízení a velikostí obrazovky .

Tato touha natáhnout obrázek na pozadí je velmi častou touhou webových designérů, protože ne každý obrázek se vejde do prostoru webové stránky. Namísto nastavování pevného rozměru, protahování obrazu umožňuje, aby se ohebně přizpůsobil stránce bez ohledu na to, jak široké nebo úzké je okno prohlížeče .

Nejlepším způsobem, jak natáhnout obrázek na pozadí stránky, je použít vlastnost CSS3 pro velikost pozadí. Zde je příklad, který používá obrázek pozadí pro tělo stránky a který nastavuje velikost na 100% tak, aby se vždy natáhla tak, aby se vešla na obrazovku.

tělo {
pozadí: url (bgimage.jpg) no-repeat;
velikost pozadí: 100%;
}}

Podle caniuse.com tato vlastnost funguje v aplikacích IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ a na všech hlavních mobilních prohlížečích. To vás pokrývá pro všechny dostupné moderní prohlížeče, což znamená, že byste měli používat tuto vlastnost bez obav, že nebude fungovat na obrazovce někoho.

Zvětšování pozadí v starších prohlížečích

Je velmi nepravděpodobné, že byste potřebovali podporovat prohlížeče starší než IE9, ale předpokládejme, že máte obavy, že IE8 tuto vlastnost nepodporuje. V tomto případě můžete falešně protáhnout pozadí. A můžete použít předpony prohlížeče pro Firefox 3.6 (-moz-background-size) a Opera 10.0 (-o-background-size).

Nejsnazší způsob, jak falešný obrázek na pozadí protáhnout, je jeho roztažení po celé stránce. Pak neskončíte s žádným volným prostorem nebo se nemusíte obávat, že váš text zapadá do roztažené oblasti. Postupujte takto:

id = "bg" />

1. Nejprve se ujistěte, že všechny prohlížeče mají 100% výšku, 0 okrajů a 0 polstrování na prvcích a BODY HTML. Umístěte následující do hlavy dokumentu HTML:

2. Přidejte obrázek, který chcete být na pozadí jako první prvek webové stránky, a dejte jej id "bg":

3. Umístěte obrázek na pozadí tak, aby byl fixován v horní a levém směru a byl 100% široký a 100% vysoký. Přidejte toto do svého stylu:

   img # bg {
   poloha: fixní;
   horní: 0;
   vlevo: 0;
   šířka: 100%;
   výška: 100%;
   }}

4. Přidejte celý svůj obsah na stránku uvnitř prvku DIV s id "obsahu". Přidat DIV pod obrázek:

   Veškerý váš obsah zde - včetně záhlaví, odstavců atd.

   Poznámka: Je zajímavé se podívat na svou stránku. Obraz by měl být zobrazen nakloněný, ale váš obsah zcela chybí. Proč? Vzhledem k tomu, že obrázek na pozadí je ve výšce 100% a rozdělení obsahu je po obrázku v toku dokumentu - většina prohlížečů ji nezobrazí.
   
5. Umístěte obsah tak, aby byl relativní a má z-index 1. Tímto způsobem jej přenesete nad obrázek pozadí v prohlížečích kompatibilních s normami. Přidejte toto do svého stylu:

   #obsah {
   poloha: relativní;
   z-index: 1;
   }}

1. Ale nejste hotovi. Aplikace Internet Explorer 6 není kompatibilní s normami a stále má některé problémy. Existuje mnoho způsobů, jak skrýt CSS z každého prohlížeče, ale IE6, ale nejjednodušší (a nejméně pravděpodobné, že způsobuje další problémy) je používat podmíněné komentáře. Po vložení šablony stylů do hlava dokumentu vložte následující:

2. Uvnitř zvýrazněného komentáře přidejte další styly s některými styly, abyste získali IE 6,

3. Ujistěte se, že testujete i v IE 7 a IE 8. Možná bude třeba upravit komentáře a podpořit je také. Ovšem fungovalo to, když jsem testoval.

OK - to je jistě WAY overkill. Velmi málo webů potřebuje podporovat IE 7 nebo 8, mnohem méně IE6!

Jako takový je tento přístup zastaralý a pravděpodobně pro vás zbytečný. Zanechávám to tady více jako model zvědavosti, jak moc těžší věci byly předtím, než všechny naše prohlížeče hrály tak pěkně dohromady!

Vytváření překryvného pozadí na pozadí menšího prostoru

Stejnou technikou můžete použít falešný obrázek na pozadí přes DIV nebo jiný prvek na vaší webové stránce. To je trochu trickier, protože musíte buď použít absolutní polohování, nebo máte podivné rozestupy pro jiné části vaší stránky.

1. Umístěte obrázek na stránku, kterou chci použít jako pozadí.

2. V listu stylů nastavte šířku a výšku obrázku. Všimněte si, že můžete použít procentuální hodnoty pro šířku nebo výšku, ale snazší přizpůsobení je s hodnotami délky výšky.

   img # bg {
   šířka: 20m;
   výška: 30cm;
   }}

3. Umístěte svůj obsah do adresáře div s obsahem "id", jak jsme uvedli výše:

   Celý váš obsah zde

4. Styl obsahu div má stejnou šířku a výšku jako obrázek na pozadí:

   div # obsah {
   šířka: 20m;
   výška: 30cm;
   }}

5. Potom umístěte obsah do stejné výšky jako obrázek. Takže pokud je váš obrázek 30cm, měli byste styl špičkové: -30em; Nezapomeňte na obsah z-index 1.

   #obsah {
   poloha: relativní;
   nahoru: -30m;
   z-index: 1;
   šířka: 20m;
   výška: 30cm;
   }}

6. Poté přidejte z-index -1 pro uživatele IE 6, jak jste učinili výše:

Opět platí, že s velikostí pozadí, která se těší široké podpoře prohlížeče, je tento přístup také velmi zbytečný a prezentován jako produkt minulé doby. Pokud jste chtěli tento přístup použít, ujistěte se, že otestujete to v co nejvíce prohlížečích.

A pokud se váš obsah změní, je třeba změnit velikost kontejneru a obrázek na pozadí, jinak skončíte s podivnými výsledky.