Opakování obrázku na pozadí CSS
CSS pozadí-opakování
Ve výchozím nastavení background-image
vlastnost opakuje obrázek vodorovně i svisle.
Některé obrázky by se měly opakovat pouze vodorovně nebo svisle, jinak budou vypadat divně, například takto:
Příklad
body
{
background-image: url("gradient_bg.png");
}
Pokud se výše uvedený obrázek opakuje pouze vodorovně ( background-repeat: repeat-x;
), bude pozadí vypadat lépe:
Příklad
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tip: Chcete-li snímek opakovat svisle, nastavtebackground-repeat: repeat-y;
CSS background-repeat: no-repeat
Zobrazení obrázku na pozadí pouze jednou je také určeno background-repeat
vlastností:
Příklad
Zobrazit obrázek na pozadí pouze jednou:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Ve výše uvedeném příkladu je obrázek pozadí umístěn na stejném místě jako text. Chceme změnit polohu obrázku, aby příliš nerušil text.
CSS pozice na pozadí
Vlastnost background-position
se používá k určení polohy obrázku na pozadí.
Příklad
Umístěte obrázek na pozadí do pravého horního rohu:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}