Właściwości CSS tła są używane do określenia wpływu tła dla elementów.
Właściwości CSS background:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Kolor tła
background-color właściwość określa kolor tła elementu.
Kolor tła strony jest ustawiony tak:
Z CSS, kolor jest najczęściej określa:
- poprawną nazwą kolor - podobnie jak "red"
- wartość HEX - podobnie jak "#ff0000"
- wartość RGB - podobnie jak "rgb(255,0,0)"
Spójrz na CSS wartości kolorów , aby uzyskać pełną listę możliwych wartości kolorów.
W poniższym przykładzie, <h1>, <p> i <div> elementy mają różne kolory tła:
Przykład
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Spróbuj sam " Zdjęcie w tle
background-image właściwość określa obraz używany jako tło elementu.
Domyślnie obraz powtarza się więc obejmuje cały element.
Obraz tła dla strony można ustawić w następujący sposób:
Poniżej znajduje się przykład złej kombinacji tekstu i tła. Tekst jest mało czytelny:
 | Uwaga: W przypadku korzystania z obrazu tła, należy użyć obrazu, który nie przeszkadza w tekst. |
|---|
Tło obrazu - Powtórz poziomo lub pionowo
Domyślnie background-image nieruchomość powtarza obraz zarówno poziomo jak i pionowo.
Niektóre obrazy powinny być powtarzany tylko w poziomie lub w pionie, lub będą one wyglądać dziwnie, jak poniżej:
Jeśli obraz powyżej jest powtarzany tylko w poziomie ( background-repeat: repeat-x; ), w tle będzie wyglądać lepiej:
Przykład
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Spróbuj sam " | Uwaga: Aby powtórzyć obraz pionowo ustawioną background-repeat: repeat-y; |
|---|
Tło obrazu - Ustawić położenie i no-repeat
Pokazuje obraz tła tylko raz jest również określony przez background-repeat nieruchomości:
Przykład
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Spróbuj sam " W powyższym przykładzie, obraz tła jest pokazany w tym samym miejscu co tekst. Chcemy, aby zmienić położenie obrazu, dzięki czemu nie przeszkadza tekst zbyt wiele.
Pozycja obrazu jest określony przez background-position nieruchomości:
Przykład
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Spróbuj sam " Tło obrazu - pozycja Fixed
Aby określić, że obraz tła powinien być stały (nie będzie przewijać się z resztą strony), użyj background-attachment własności:
Przykład
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Spróbuj sam " Tło - Skrócona forma
Skrócić kodu, to jest również możliwe, aby określić wszystkie właściwości tła w jedną właściwość. To się nazywa skróconą własnością.
Nieruchomość skrótem tle jest background :
Przy użyciu właściwości skrótowej kolejność wartości nieruchomości wynosi:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Nie ma znaczenia, czy jedna z wartości właściwości brakuje, pod warunkiem, że są także inne, w tej kolejności.
Sprawdź się z ćwiczeń!
Ćwiczenie 1 » Ćwiczenie 2» Ćwiczenie 3 » Ćwiczenia 4» Zadanie 5 »
Wszystkie właściwości CSS w tle
| Nieruchomość | Opis |
|---|---|
| background | Ustawia wszystkie właściwości tła w jednej deklaracji |
| background-attachment | Określa, czy obraz w tle jest stały czy też przewija się z resztą strony |
| background-color | Ustawia kolor tła elementu |
| background-image | Ustawia obraz tła dla elementu |
| background-position | Ustawia pozycję wyjściową obrazu tła |
| background-repeat | Ustawia jak obraz tła będzie powtarzany |