Atrybut stylu background

Definicja i użycie

background Atrybut ustawiany lub zwracany w formie skróconej dla maksymalnie ośmiu osobnych atrybutów tła.

Przez ten atrybut możesz ustawić/zwrócić jedno lub więcej z następujących elementów (w dowolnej kolejności):

Atrybut DOM Atrybut CSS
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Powyższe atrybuty można również ustawić za pomocą oddzielnych atrybutów stylu. Silnie zaleca się, aby autorzy niezaawansowani używali oddzielnych atrybutów, aby uzyskać lepszą kontrolę.

Zobacz również:

Kurs CSS3:Tło CSS

Kurs CSS3:Tło CSS3

Podręcznik CSS:Atrybut background

Przykład

Ustawienie stylu tła dokumentu:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Spróbuj sam

Poniżej znajduje się więcej przykładów TIY.

Gramatyka

Zwróć atrybut background:

object.style.background

Ustawienie atrybutu background:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Wartość atrybutu

Wartość Opis
color Ustaw kolor tła elementu.
image Ustaw obraz tła elementu.
repeat Ustaw sposób powtarzania obrazu tła.
attachment Ustaw, czy obraz tła jest stały czy przesuwa się z przewijaniem strony.
position Ustaw pozycję początkową obrazu tła.
size Ustaw rozmiar obrazu tła.
origin Ustaw obszar lokalizacji tła.
clip Ustaw obszar rysowania obrazu tła.
initial Ustaw tę właściwość na jej wartość domyślną. Zobacz: initial.
inherit Dziedziczy tę właściwość od elementu nadrzędnego. Zobacz: inherit.

Szczegóły techniczne

Domyślna wartość: transparent none repeat scroll 0% 0% auto padding-box border-box
Zwracana wartość: Ciąg znaków, który reprezentuje tło elementu.
Wersja CSS: Wersja CSS: CSS1 + nowe właściwości w CSS3

Więcej przykładów

Przykład 2

Zmień tło elementu DIV:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Spróbuj sam

Przykład 3

Ustaw kolor tła dokumentu:

document.body.style.backgroundColor = "red";

Spróbuj sam

Przykład 4

Ustaw obraz tła dokumentu:

document.body.style.backgroundImage = "url('img_tree.png')";

Spróbuj sam

Przykład 5

Ustaw obraz tła na niepowtarzalny:

document.body.style.backgroundRepeat = "repeat-y";

Spróbuj sam

Przykład 6

Ustaw obraz tła na stały (nie będzie się przesuwał):

document.body.style.backgroundAttachment = "fixed";

Spróbuj sam

Przykład 7

Zmień pozycję obrazu tła:

document.body.style.backgroundPosition = "top right";

Spróbuj sam

Przykład 8

Zwróć wartość atrybutu tła dokumentu:

document.body.style.background;

Spróbuj sam

Obsługa przeglądarek

background To cecha CSS1 (1996).

Wszystkie przeglądarki obsługują je w pełni:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Wspierane Wspierane Wspierane Wspierane Wspierane Wspierane

Komentarze

CSS3 (1999) dodał trzy nowe atrybuty: