Jak Vytvořit Obrázek Na Pozadí Na Webu

Obsah:

Jak Vytvořit Obrázek Na Pozadí Na Webu
Jak Vytvořit Obrázek Na Pozadí Na Webu

Video: Jak Vytvořit Obrázek Na Pozadí Na Webu

Video: Jak Vytvořit Obrázek Na Pozadí Na Webu
Video: Tvorba webu - CSS - jak nastavit obrázek na pozadí a jeho varianty - tutoriál č.3 2024, Listopad
Anonim

Můžete se naučit základy budování stránek sami; na internetu a v knihách je o tomto tématu dostatek informací. V počáteční fázi však často vznikají potíže s používáním jedné nebo jiné značky. Nejběžnější komponenty si nejlépe pamatujete, protože jsou nezbytné při psaní libovolného webu.

Jak vytvořit obrázek na pozadí na webu
Jak vytvořit obrázek na pozadí na webu

Instrukce

Krok 1

Vyberte obrázek, který chcete použít jako obrázek na pozadí. Pokud máte v úmyslu vložit text přes ilustraci, pak je v tomto případě vhodné omezit se na možnosti bez nadměrného zpestření, ve kterých je použito několik barev, které jsou blízké. V zásadě můžete k odstranění vlnění vytvořit „pozadí“obsahu - a problém bude úspěšně vyřešen.

Krok 2

Opravte obrázek pomocí aplikace Adobe Photoshop. Po dokončení vyberte příkaz Uložit pro web z nabídky Soubor a vyberte požadovanou složku. Pokud se jedná o první obrázek, který se použije pro web, automaticky se vytvoří složka „Obrázky“.

Krok 3

Do značky napište atribut background = "path to image". Příklad záznamu: nebo. Zároveň mějte na paměti, že značka by se měla v kódu objevit pouze jednou, neměla by se znásobovat.

Krok 4

Uložte změny v poznámkovém bloku, klikněte v prohlížeči na tlačítko „Obnovit“. Tapeta se objeví na obrazovce. Pokud jsou rozměry obrázku menší než parametry webové stránky, bude obraz duplikován tolikrát, kolikrát je třeba, aby vyplnil celý prostor. Existují dva způsoby, jak tento nedostatek napravit:

• pomocí programu Adobe Photoshop nastavte požadované parametry obrázku v pixelech („Obrázek“- „Velikost obrázku“);

• nastavte požadované rozměry v html kódu.

Pokud je například šířka 1250 px a výška 650 px, musíte přidat potřebné atributy pro buňku tabulky, do které bude obrázek umístěn.

Ve značce nemůžete nastavit velikost - obrázek se vždy zobrazí v plné velikosti.

Krok 5

Analog ccs pro vložení obrázku na pozadí:

obrázek na pozadí

TĚLO {

background-image: url (images / bg.jpg);

}

Atribut "background-image: url (images / bg.jpg)" je cesta k obrázku na pozadí.

Doporučuje: