CSS: vložte obrázek - takto to funguje
V tomto praktickém tipu vysvětlíme, jak vložit obrázek pomocí CSS. V zásadě lze obrázky vkládat pouze ve formě obrázků na pozadí. To je však dostačující.
Vložte obrázek do CSS
Pokud například chcete do záhlaví zahrnout obrázek pomocí CSS, jako je vaše logo, pak v #header deklarujte následující vlastnosti:
- "background: url (image.webp) #FFFFFF;"
- Zde se výrazem „bild.webp“ rozumí adresa URL vašeho obrázku, buď relativní k souboru css, nebo jako absolutní adresa na vašem disku.
- Barvou deklarujete barvu pozadí na svém webu.
- Obrázek lze nyní umístit pomocí přesné polohy, například: "Pozice na pozadí: 100 px 100 pixelů;" nebo prostřednictvím relativních informací určených okrajem okna, jako je „poloha na pozadí: vpravo dole;“.
- Aby se váš obraz nepřetržitě neopakoval, můžete v rámci vlastnosti „pozadí-opakování“ zadat „neopakovat“. Vypadá to takto: "opakování na pozadí: ne-opakování;".
- Vlastností „background-attachment“ určujete, zda se obraz pohybuje s posouváním nebo zůstává na pevném místě na stránce: „background-attachment: fixed;“.
- Vlastnosti jsou uvedeny v souboru CSS bez uvozovek.
V dalším praktickém tipu si přečtěte, jak integrovat soubor CSS pomocí HTML.