Jak nastavit obrázek na pozadí v CSS

Vytvoření webové stránky je skvělý způsob, jak se vyjádřit. Přestože existuje mnoho nástrojů pro vytváření webových stránek, je jejich vlastní psaní zábavným způsobem, jak se dozvědět více o tom, jak webové stránky fungují v zákulisí. Dobrý projekt pro začátečníky je vytvořit webovou stránku a přidat obrázek na pozadí pomocí CSS. Tento projekt vás uvede do provozu s HTML i CSS.

Co je CSS?

CSS je zkratka pro Cascading Style Sheet. Je to programovací jazyk, který vám umožňuje stylizovat značkovací jazyky. Jeden takový značkovací jazyk je HTML nebo Hyper-Text Markup Language. HTML se používá k vytváření webových stránek. Ačkoli můžete ovládat některý styl webových stránek pomocí HTML, CSS nabízí mnohem více možností ovládání a designu.

Vytvoření základního webu s HTML

Vzhledem k tomu, že CSS je jen styl jazyka, abychom jej mohli používat, musíme nejprve něco upravit. Úplně základní web nám bude stačit k tomu, abychom si mohli začít hrát s CSS. Na naší stránce se zobrazí „Hello World“.

  
  
  
  
 Hello World

V případě, že nejste obeznámeni s HTML, pojďme se rychle podívat na to, co všechny prvky dělají. Jak již bylo zmíněno, HTML je značkovací jazyk, což znamená, že pomocí značek označuje text. Kdykoli uvidíte slovo obklopené je to štítek. Existují dva typy značek, tag, který označuje začátek sekce pomocí a jeden, který označuje konec sekce pomocí. Text v sekci má také usnadnit pochopení tohoto rozlišení.

V našem příkladu máme čtyři tagy. The html tag udává, které prvky jsou součástí webu. The hlava tag obsahuje informace o záhlaví, které se na stránce nezobrazují, ale jsou potřebné k vytvoření stránky. Všechny zobrazené prvky jsou mezi tělo tagy. Máme pouze jeden zobrazený prvek p štítek. Informuje webový prohlížeč, že text je odstavec.

Příbuzný: 10 jednoduchých příkladů kódu CSS, které se můžete naučit za 10 minut

Přidání CSS do HTML

Nyní, když máme jednoduchou stránku, můžeme styl přizpůsobit pomocí CSS. Naše stránka je v současné době docela jednoduchá a není mnoho, co bychom mohli udělat, ale začněme tím, že zvýrazníme náš odstavec, abychom jej mohli odlišit od pozadí přidáním ohraničení.

  
  
  
  
 Hello World

Náš odstavec bude nyní obklopen černým okrajem. Přidání popisu stylu v CSS do naší značky odstavců sdělilo webu, jak odstavec stylizovat. Můžeme přidat další popisy. Zvětšme mezeru nebo odsazení kolem odstavce a vycentrujme text.

  
  
  
  
 Hello World

Naše webové stránky vypadají lépe, ale naše HTML začíná vypadat chaoticky se všemi těmito popisy ve značce odstavce. Tyto informace můžeme přesunout do naší hlavičky. Naše záhlaví je pro informace, které potřebujeme pro správné zobrazení webových stránek.

  
  
  
 p {  
 text-align: center  
 }  
 #ourParagraph {  
 border-style: solid;  
 padding: 30px;  
 }  
  
  
  
 Hello World

Náš HTML je nyní čitelnější. Všimnete si, že jsme museli některé věci změnit. Značka stylu sděluje informace o stylu webového prohlížeče, ale také co je třeba stylovat. V našem příkladu jsme použili dva různé způsoby, jak říct, co se má stylovat. The p ve značce stylu říká webovému prohlížeči, aby použil tento styl na všechny značky odstavců. The #ourParagraph sekci říká, že pouze stylové prvky s id náš odstavec . Všimněte si toho id informace byly přidány do tagu p v našem těle.

které zařízení v počítačové skříni spotřebovává nejmenší příkon?

Import souboru CSS na váš web

Přidání informací o stylu do záhlaví značně usnadní čtení našeho kódu. Pokud však chceme stylovat mnoho různých stránek stejným způsobem, musíme tento text přidat na začátek každé stránky. To se může zdát málo práce, můžete to koneckonců zkopírovat a překonat, ale pokud budete chtít prvek později změnit, bude to znamenat spoustu práce.

Místo toho budeme uchovávat informace CSS v samostatném souboru a importovat soubor pro úpravu stránky. Zkopírujte a vložte informace mezi značkami stylu do nového souboru CSS ourCSSfile.css .

p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Potom importujte soubor do souboru HTML.

  
  
  
  
  
 Hello World

Přidání obrázku na pozadí pomocí CSS

Nyní, když máte solidní základ v HTML a CSS, bude přidání obrázku na pozadí hračkou. Nejprve určete, kterému prvku chcete dát obrázek na pozadí. V našem příkladu přidáme pozadí na celou stránku. To znamená, že chceme změnit styl tělo . Pamatujte, že body tagy obsahují všechny viditelné prvky.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 border-style: solid;  
 padding: 30px;  
}

Chcete -li změnit styl těla v CSS, nejprve použijte tělo klíčové slovo. Poté přidejte složené závorky jako před {}. Všechny informace o stylu pro tělo musí být mezi složenými závorkami. Atribut stylu, který chceme změnit, je obrázek na pozadí . Existuje mnoho atributů stylu. Nečekejte, že si je všechny zapamatujete. Cheat-list vlastností CSS přidejte do záložek s atributy, které si chcete zapamatovat.

Příbuzný: 8 skvělých efektů HTML, které může kdokoli přidat na své webové stránky

stahujte jakékoli video z libovolného webu online zdarma

Za atributem označte dvojtečkou, jak atribut změníte. Chcete -li importovat obrázek, použijte url () . označuje, že používáte odkaz, který ukazuje na obrázek. Umístěte soubor do závorek mezi uvozovky. Nakonec řádek ukončete středníkem. Přestože prázdné místo nemá v CSS význam, použijte odsazení, aby bylo CSS čitelnější.

Náš příklad vypadá takto:

Pokud se váš obrázek kvůli velikosti obrázku nezobrazuje správně, můžete jej přímo změnit. V CSS však existují atributy stylu pozadí, které můžete použít ke změně pozadí. Obrázky, které jsou menší než pozadí, se budou automaticky opakovat na pozadí. Chcete -li to vypnout, přidejte opakování na pozadí:neopakovat; svému živlu.

Existují také dva způsoby, jak obrázek pokrýt celé pozadí. Nejprve můžete nastavit velikost pozadí na velikost obrazovky pomocí velikost pozadí: 100% 100%; , ale to roztáhne obraz a může obraz příliš zkreslit. Pokud nechcete, aby se měnily proporce obrázku, můžete také nastavit velikost pozadí na Pokrýt . Cover způsobí, že obrázek pozadí zakryje pozadí, ale nezkreslí obrázek.

Změna barvy pozadí

Pojďme změnit jednu poslední věc. Nyní, když máme pozadí, je náš odstavec těžko čitelný. Pojďme udělat jeho pozadí bílé. Postup je podobný. Prvek, který chceme upravit, je #ourParagraph. # Označuje, že 'ourParagraph' je ID jméno. Dále chceme nastavit barva pozadí atribut bílé.

body{  
 background-image: url('sky.jpg');  
}  
p {  
 text-align: center  
}  
#ourParagraph {  
 background-color: white;  
 border-style: solid;  
 padding: 30px;  
}

Mnohem lepší.

Pokračování v navrhování vašich webových stránek pomocí CSS

Nyní, když víte, jak změnit styl různých prvků HTML, je obloha limitem! Základní metoda pro změnu atributů stylu je stejná. Identifikujte prvek, který chcete změnit, a popište, jak atribut změnit. Nejlepší způsob, jak se dozvědět více, je hrát si s různými atributy. Vyzvěte se, abyste příště změnili barvu textu.

Podíl Podíl tweet E-mailem 8 nejlepších stránek pro kvalitní příklady kódování HTML

Chcete se naučit HTML kódovat vlastní webové stránky a aplikace? Pomocí těchto příkladů webových stránek a zdrojového kódu se naučíte HTML a CSS.

Číst dále Související témata

Programování
HTML
Webový design
CSS

O autorovi Jennifer Seaton(21 článků zveřejněno)

J. Seaton je vědecký spisovatel, který se specializuje na bourání složitých témat. Má doktorát z University of Saskatchewan; její výzkum se zaměřil na využití herního učení ke zvýšení zapojení studentů online. Když nepracuje, najdete ji při čtení, hraní videoher nebo zahradničení.

Více od Jennifer Seaton

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru