Jak ustawić obraz tła w CSS

Jak ustawić obraz tła w CSS

Aby ustawić obraz za elementem, „zdjęcie w tle„Wystąpi własność CSS. Domyślnie pojawia się w lewym górnym rogu ekranu i jest powtarzany poziomo i pionowo. Możesz także dodać więcej niż jeden obraz w tle elementu HTML; Ponadto ustaw szerokość i wysokość obrazu zgodnie z preferencjami. Jednak możesz również zatrzymać powtarzanie obrazu.

Ten zapis zapewni następujące wyniki uczenia się:

    • właściwość obrazu tła
    • Jak ustawić obraz tła

Właściwość CSS „Image w tle”

„„zdjęcie w tle„Właściwość służy do zastosowania obrazu na tle określonego znacznika.

Składnia

Oto składnia, aby ustawić obraz tła na element HTML:

Image tła: obraz URL ();


Tutaj Image url () ma ścieżkę nazwy obrazu lub folderu obrazu, w której istnieje.

Spróbujmy przykładu, aby lepiej zrozumieć.

Przykład: Jak ustawić obraz tła za pomocą CSS?

W tym przykładzie najpierw utworzymy dwa kolejne elementy (

I

tagi), za którym zostanie dodany obraz tła. Możesz dodać elementy zgodnie z wyborem i zastosować do niego właściwość obrazu tła:


Ustaw obraz tła



Aby ustawić obraz tła, użyj właściwości obrazu tła CSS



Możesz dodać elementy zgodnie z wyborem i zastosować do niego właściwość tła.

Przejdź do CSS i przypisz nazwę obrazu w „zdjęcie w tle„URL:

ciało
Image tła: URL („IMG.jpg ");


Po zakończeniu wszystkich kroków wykonaj plik HTML, otrzymasz następujący wynik:


Tutaj widać, że obraz tła jest powtarzany. Aby tego uniknąć, użyj „powtarzanie tła”Właściwość i ustaw wartość na„bez powtórki”:

ciało
Image tła: URL („IMG.jpg ");
Powtórzenie tła: bez powtórzenia;


Po zakończeniu wykonaj kod i sprawdź swoją stronę internetową:


Teraz masz czysty i elegancki wygląd obrazu tła na tag.

Dobre praktyki do ustawiania obrazów w tle

    • Wybierz obraz pasujący do koloru tekstu.
    • Użyj atrakcyjnych kombinacji kolorów.
    • Jeśli obraz tła i kolor tekstu nie pasują do siebie, Twoja strona jest słabo zaprojektowana.

Wniosek

Aby dodać obraz tła w CSS, użyj „zdjęcie w tle”Właściwość i podaj adres URL obrazu w funkcji URL () CSS. Możesz także zapobiec powtarzaniu się obrazu za pomocą „powtarzanie tła”Własność i ustalenie wartości do„nic". W tym artykule wyjaśniono procedurę dodania obrazu do tła za pomocą „zdjęcie w tle" I "powtarzanie tła" nieruchomości.