Powtarzanie obrazu tła CSS
CSS w tle-powtórz
Domyślnie background-imagewłaściwość powtarza obraz zarówno w poziomie, jak iw pionie.
Niektóre obrazy powinny być powtarzane tylko w poziomie lub w pionie, w przeciwnym razie będą wyglądać dziwnie, na przykład:
Przykład
body
{
background-image: url("gradient_bg.png");
}
Jeśli powyższy obrazek powtórzy się tylko poziomo ( background-repeat: repeat-x;), tło będzie wyglądało lepiej:
Przykład
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Wskazówka: Aby powtórzyć obraz w pionie, ustawbackground-repeat: repeat-y;
CSS background-repeat: no-repeat
Pokazywanie obrazu tła tylko raz jest również określone przez background-repeatwłaściwość:
Przykład
Pokaż obraz tła tylko raz:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
W powyższym przykładzie obraz tła jest umieszczony w tym samym miejscu co tekst. Chcemy zmienić położenie obrazu, aby nie przeszkadzał zbytnio w tekście.
Pozycja tła CSS
Właściwość background-positionsłuży do określenia położenia obrazu tła.
Przykład
Ustaw obraz tła w prawym górnym rogu:
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}