[CSS] Jak ustawić obraz jako tło?

CSS pozwala na ustawienie tła graficznego zarówno dla całej strony (body) lub dla każdego innego elementu HTML. Do ustawiania tła graficznego służy właściwość background-image lub background z odpowiednimi wartościami i polecam stosować właśnie tą drugą metodę. Aby tło graficzne mogło zostać ustawione dla elementu musimy podać jego adres źródłowy, a robi się to za pomocą atrybutu url, np.
background: #000000 url('https://www.example.com/images/background.png');.
Jak widać oprócz adresu źródłowego do tła, podany został także domyślny kolor - tak dla właściwości background, a także innych właściwości CSS można podać kilka wartości oddzielając je od siebie spacjami. Wracając do tematu, aby ustawić tło dla całej strony ustawiamy właściwość background dla selektora body, analogicznie robimy dla innych elementów HTML. Dodatkowo możemy podać wartości dla pozycjonowania tła np. center center (wyśrodkowanie w pionie i w poziomie). Domyślnie obraz tła będzie umieszczony w górnym lewym rogu (top left).

Przykład

body {

 background: #000000 url('https://www.example.com/images/background.png') 50% 50%;

}

W powyższym przykładzie graficzne tło zostanie ustawione dla selektora body, czyli dla całego dokumentu HTML oraz zostanie ono wyśrodkowane w pionie i w poziomie. Ponadto jeśli nie uda się wczytać obrazu tła zostanie ustawiony kolor czarny (#000000), a co więcej jeśli obraz np. PNG będzie zawierał elementy przezroczyste również zostaną one wypełnione ustalonym kolorem - w tym przykładzie czarnym.

Podobnie sprawa ma się w przypadku innych elementów. W poniższym przykładzie tło zostanie ustawione dla elementu div:

.bg {

 background: #000000 url('https://www.example.com/images/background.png') center top;

}

<div class="bg"></div>

Komentarze

Prześlij komentarz

Dzięki za komentarz!

Popular

[HTML] Jak wstawić obrazek?

Cześć! Jesteś tu zapewne dlatego, bo nie wiesz jak wstawić zdjęcie na stronę. W tym wpisie nauczysz się wstawiać obrazek na stronę www zarówno jako tylko obrazek, ale też obrazek jako klikalny odnośnik. Przejdźmy zatem do nauki... Wstawianie obrazka Do wstawiania grafiki na stronę służy znacznik img z atrybutami src oraz alt . Atrybutem wymaganym jest src - adres źródłowy (adres grafiki, którą chcemy wstawić na stronę). Atrybut alt - zawiera tekst alternatywny, który zostanie wyświetlony, gdy wczytanie obrazka się nie powiedzie. Podsumowując, aby wstawić zdjęcie piszemy następujący fragment kodu: <img src="images/flower.jpg" alt="Kwiatek" /> Link z obrazkiem A teraz połączenie odnośnika z obrazkiem, czyli zastąpienie tekstu w linku zdjęciem: <a href="https://www.ukodowani.pl"><img src="images/banner.jpg" alt="ukodowani.pl" /></a> Możesz również ustawić zdjęcie jako tło . Jeśli chcesz dowiedzieć się j
Czytaj więcej

[C++] Jak obliczyć pole i obwód trapezu?

Przed napisaniem programu obliczającego pole i obwód trapezu, przypomnij sobie wzory. Pole trapezu liczymy według wzoru P=((a+b)*h)/2. Wzór na obwód Ob=a+b+c+d. Obliczając pole trapezu musimy znać rozmiary dwóch podstaw i wysokości. Obliczamy pole trapezu #include <iostream> using namespace std; int main() { int a; int b; int h; double p; cout << "Podaj długość podstawy a: "; cin >> a; cout << "Podaj długość podstawy b: "; cin >> b; cout << "Podaj wysokość: "; cin >> h; if(cin.good() == true) { p = ((a + b) * h) / 2.0; cout << "Pole trapezu wynosi: " << p; } return 0; } Obliczamy obwód trapezu #include <iostream> using namespace std; int main() { int a, b, c, d, ob; cout << "Podaj długość boku a: "; cin >> a; cout << "Podaj długość boku b: "; cin >> b; cout << "Podaj długość boku c: "; cin >> c;
Czytaj więcej

[PHP] Jak pobrać adres strony?

Gdy zajdzie potrzeba pobrania adresu strony, na której użytkownik aktualnie się znajduje, posłużyć się można do tego celu tablicą $_SERVER z kluczem 'SERVER_NAME'. Pobranie adresu strony, na której znajduje się użytkownik sprowadza się dosłownie do połączenia dwóch elementów tablicy $_SERVER: SERVER_NAME oraz REQUEST_URI . Element o kluczu 'SERVER_NAME' zawiera nazwę hosta serwera, na którym wykonywany jest skrypt, a element z kluczem 'REQUEST_URI' pobiera wszystko to, co zostało wpisane po nazwie domeny np. '/index.php'. Tak więc, aby wyświetlić adres strony lub adres do skryptu, łączymy te dwa elementy: echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; Powyższy przykład wyświetli nam URL, pod którym aktualnie się znajdujemy, ale bez przedrostka http/https. Aby do ciągu z URL'em dołączana była nazwa protokołu, musimy użyć jeszcze jednego elementu tablicy $_SERVER, a mianowicie HTTPS , który nie będzie pusty, jeśli żądanie
Czytaj więcej