Aby ustawić grafikę jako tło strony HTML, należy wykorzystać język CSS, który oferuje dużą elastyczność oraz szerokie możliwości konfiguracji efektów wizualnych. Poniżej znajdziesz szczegółowy poradnik wyjaśniający różne techniki dodawania tła graficznego, dostosowania jego wyglądu oraz przykłady praktycznego zastosowania.
Dlaczego CSS – a nie czysty HTML?
Dodawanie tła graficznego przy pomocy samego HTML jest mocno ograniczone. Kiedyś wykorzystywano do tego atrybut background (np. w znaczniku <body>), jednak obecnie uznaje się to za przestarzałe rozwiązanie, niezgodne ze współczesnymi standardami webowymi. Aktualnie niemal wyłącznie stosuje się do tego właściwości CSS.
Podstawowy sposób: CSS background-image
Najczęściej tło ustawiamy przy pomocy właściwości background-image lub skróconej background w deklaracji CSS.
Przykład – tło dla całej strony
Aby ustawić obrazek jako tło całej strony:
body { background-image: url('sciezka/do/obrazka.jpg'); } Obrazek zostanie automatycznie powielony (zduplikowany) w pionie i poziomie, aby wypełnić całą powierzchnię tła. To domyślne zachowanie można oczywiście zmienić.
Zabezpieczenie: background-repeat, background-size, background-position
CSS pozwala precyzyjnie sterować wyświetlaniem tła:
- background-repeat – określa czy i jak tło ma być powielane;
- background-size – pozwala ustalić rozmiar tła;
- background-position – pozwala ustawić pozycję tła względem elementu.
Przykłady zastosowań
Tło nierozciągnięte, niepowielane, wyśrodkowane
body { background-image: url('images/tlo.jpg'); background-repeat: no-repeat; background-position: center center; } Tło rozciągnięte na całą szerokość/wysokość
Aby dopasować tło do rozmiaru okna (responsywnie):
body { background-image: url('images/tapeta.jpg'); background-size: cover; background-repeat: no-repeat; background-position: center; } Słowo kluczowe cover powoduje, że obrazek w całości zakrywa tło, nawet jeśli wymaga przycięcia.
Tło wybranego elementu HTML
Tło graficzne można przypisać nie tylko całej stronie, ale także do pojedynczego elementu, np. sekcji, nagłówka czy paragrafu:
header { background-image: url('images/header-bg.png'); background-size: contain; background-repeat: no-repeat; } Pełne wykorzystanie – krótkie definicje
Można użyć krótkiej, łączonej właściwości background, np.:
body { background: url('tlo.jpg') no-repeat center center fixed; background-size: cover; } Przykłady praktycznych zastosowań
Strona typu „landing page” z dużym zdjęciem w tle
body { background: url('cityscape.jpg') no-repeat center center fixed; background-size: cover; } Nałożenie półprzezroczystego koloru na grafikę (efekt „nakładki”)
body { background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('background.jpg') no-repeat center center; background-size: cover; } Tło powtarzane tylko w poziomie
body { background-image: url('line-pattern.png'); background-repeat: repeat-x; } Optymalizacja – o czym pamiętać?
- Kompresuj obrazki – wysoka jakość pliku tła może spowolnić ładowanie strony – używaj odpowiednich formatów (WebP, JPEG, PNG);
- Responsywność – parametr
background-size: coverdopasuje tło do okna; - Opis alternatywny – obrazki tła nie są dostępne dla czytników ekranu; jeśli zawierają ważne treści, zamień je na tag
<img>.
Podsumowanie – najważniejsze właściwości CSS do tła
| Właściwość | Znaczenie | Przykład |
|---|---|---|
| background-image | Ustala grafikę jako tło | background-image: url('tlo.jpg'); |
| background-repeat | Określa powtarzalność tła | background-repeat: no-repeat; |
| background-position | Pozycjonowanie tła | background-position: top left; |
| background-size | Skaluje tło | background-size: contain;, background-size: cover; |
| background-attachment | Efekt „przyklejonego” tła przy przewijaniu tekstu | background-attachment: fixed; |
| background | Skrócona deklaracja kilku właściwości naraz | background: url(tlo.jpg) center/cover no-repeat; |
Dzięki tym technikom możesz uzyskać dowolny efekt tła na stronie internetowej, zarówno subtelny jak i przykuwający uwagę. Warto eksperymentować z różnymi ustawieniami, aby osiągnąć najlepszy rezultat wizualny dla swojego projektu.
