HTML/CSS, Poradniki webdevelopera

Jak utworzyć tło w HTML?

0

Podczas tworzenia nowej strony internetowej, prawdopodobnie będziesz chciał wykorzystać wiele grafik, nie mniej jednak jak użyć grafiki jako tło danego elementu np. diva? Tym zagadnieniem zajmiemy się w tym artykule.

Właściwość odpowiadający za tło

W celu nadania tła elementowi musimy skorzystać z właściwości:

background:Przykładowykolor;

Podaną właściwość można wykorzystać poprzez stylowanie Inline (w tagach HTML) lub dedykowanych miejscach na CSS (zewnętrzne pliki CSS lub sekcja <style></style> w tagach <head></head>).

Poniżej przedstawiamy praktyczne przykłady:

Tło w stylowaniu Inline (tagu HTML):

<!DOCTYPE HTML>
<html lang="pl">
<head>>
<title>>Tło w html</title>
</head>
<body>
<div style="background:red;">
<p>czerwony kontener na tekst </p>
</div>
</body>
</html>

Efekt:

czerwony kontener na tekst

Tło w dedykowanej sekcji odpowiadającej za css:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Tło w html</title>
<style>
.greenbackground{background:green;}
</style>
</head>
<body>
<div class="greenbackground">
<p>zielony kontener na tekst </p>
</div>
</body>
</html>

Efekt:

zielony kontener na tekst

Jak widzimy efekt jest identyczny z tym, że w drugim przypadku mamy rozdzieloną sekcję oscylowania od tagów, a oprócz tego nasze tło możemy ponownie szybko wykorzystać.

Grafika jako tło

Powyżej przedstawiliśmy podstawowe (niemal surowe) dwa przypadki użycia właściwości background. Zróbmy coś bardziej kreatywnego i ustawmy grafikę jako tło naszego boxa, przy czym oscylujmy jeszcze jego wysokości oraz tekst, który ma się w nim znaleźć.

Przygotujmy strukturę naszych dokumentów

My utworzyliśmy dedykowany katalog, gdzie znajduje się plik index.html (kod naszej strony) oraz jeden katalog o nazwie „img”, gdzie znajduje się nasze zdjęcie o nazwie „kwiaty”

Struktura wygląda tak:

Struktura plików

Struktura pliku index.html

W pliku index.html dodajemy poniższy kod:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Tło w html</title>
<style>
</style>
</head>
<body>
<div class="picturebackground">
<h1>To jest nasz opis na zdjęciu</h1>
</div>>
</body>
</html>

Jest to surowa struktura, którą zaraz będziemy rozbudowywać.

Wdrażamy naszą grafikę jako tło elementu

Przystąpmy do kodowania elementu, w sekcji <style></style> dodajemy następujące selektory oraz właściwości:

.picturebackground
{
background:url('img/kwiaty.jpg');
background-size:100%;
padding:150px 0;
}

.picturebackground h1 {
text-align: center;
background: rgba(255,255,255,0.5);
padding: 17px;
font-size: 30px;
text-transform: uppercase;
}

Objaśnijmy co właśnie się stało:

Element picturebackground:

– background – Dla elementu picturebackground dodajemy tło z naszego katalogu – podana ścieżka url(’img/kwiaty.jpg’); oznacza wprost, weź grafikę z katalogu img o nazwie kwiaty.jpg

– background-size – Określamy wielkość grafiki – w naszym przypadku ustawiliśmy na 100% dostępnego miejsca (domyślnie sekcja body posiada margines o wymiarach 8px x 8px x 8px x 8px, przez co grafika nie zakrywa 100% przestrzeni – można zawsze nadpisać tą wartość poprzez body{margin:0 !important;})

– padding – określamy wewnętrzne odstępy grafiki, tak aby nasza grafika była wyższa

Element picturebackground h1 (treść znajdująca się w naszym kontenerze picturebackground):

– text-align – wyśrodkowujemy treści
– background – nadajemy tło naszemu elementowi (w tym wypadku poprzez format rgba, gdzie składowe to (składowa czerwieni, składowa zieleni, składowa niebieskiego, przejrzystość))
– padding – określamy wewnętrzne odstępy
– font-size – rozmiar naszej czcionki
– text-transform – modyfikujemy naszą treść na pisanie dużą literą

Dzięki powyższemu oscylowaniu, uzyskaliśmy następujący efekt:

Wykorzystanie grafiki jako tło

Cały kod aplikacji:

<!DOCTYPE HTML>
<html lang="pl">
<head>
<title>Tło w html</title>
<style>
.picturebackground
{
background:url('img/kwiaty.jpg');
background-size:100%;
padding:150px 0;
}
.picturebackground h1 {
    text-align: center;
    background: rgba(255,255,255,0.5);
    padding: 17px;
    font-size: 30px;
    text-transform: uppercase;
}
</style>
</head>
<body>
<div class="picturebackground">
<h1>To jest nasz opis na zdjęciu</h1>
</div>
</body>
</html>

Podsumowanie

Zapoznając się z powyższym artykułem pozyskałeś bogatą dawkę wiedzy z zakresu tła strony, podane przykłady można spokojnie zmieniać/testować. Jeżeli macie jakieś pytania to zapraszamy do zadawania ich w komentarzach.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *