Styl tła Właściwość
Przykład
Stylizuj tło dokumentu:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Właściwość tła ustawia lub zwraca do ośmiu oddzielnych właściwości tła w formie skróconej.
Za pomocą tej właściwości możesz ustawić/zwrócić jedno lub więcej z poniższych (w dowolnej kolejności):
- kolor tła
- zdjęcie w tle
- powtarzanie tła
- załącznik w tle
- pozycja w tle
- rozmiar tła
- tło-pochodzenie
- klip w tle
Powyższe właściwości można również ustawić za pomocą oddzielnych właściwości stylu. Stosowanie oddzielnych właściwości jest wysoce zalecane dla początkujących autorów w celu lepszej kontroli.
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę właściwość.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Uwaga: zobacz obsługę poszczególnych przeglądarek dla każdej wartości poniżej.
Składnia
Zwróć właściwość tła:
object.style.background
Ustaw właściwość tła:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Wartości nieruchomości
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Szczegóły techniczne
| Domyślna wartość: | przezroczysty brak powtórz przewijanie 0% 0% auto padding-box border-box |
|---|---|
| Wartość zwrotu: | String, reprezentujący tło elementu |
| Wersja CSS | CSS1 + nowe właściwości w CSS3 |
Więcej przykładów
Przykład
Zmień tło elementu DIV:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Przykład
Ustaw kolor tła dla dokumentu:
document.body.style.backgroundColor = "red";
Przykład
Ustaw obraz tła dla dokumentu:
document.body.style.backgroundImage = "url('img_tree.png')";
Przykład
Ustaw obraz tła bez powtarzania:
document.body.style.backgroundRepeat = "repeat-y";
Przykład
Ustaw obraz tła na naprawiony (nie będzie się przewijał):
document.body.style.backgroundAttachment = "fixed";
Przykład
Zmień położenie obrazu tła:
document.body.style.backgroundPosition = "top right";
Przykład
Zwróć wartości właściwości tła dokumentu:
document.body.style.background;
Powiązane strony
Samouczek CSS: Tło CSS
Samouczek CSS3: tła CSS3
Odniesienie CSS: właściwość tła