Korzystając z HTML i CSS, programiści mogą robić wiele rzeczy, aby aplikacja lub strony internetowe są bardziej niezawodne i skuteczne. Osadzanie elementów responsywnych jest jednym z nich. Mówiąc dokładniej, element responsywny oznacza, gdy użytkownicy otwierają stronę internetową na dowolnym urządzeniu, nie wpłynie to na jego widoczność. Dodanie responsywnych obrazów w CSS automatycznie zmodyfikuje rozmiar ekranu.

Ten post wyjaśnił responsywne obrazy tła CSS.

Jak dodać responsywne obrazy tła CSS?

Aby dodać obraz responsywny jako tło, postępuj zgodnie z poniższymi instrukcjami.

Krok 1: Utwórz kontener Div

Początkowo stwórz kontener DIV za pomocą „”Oznacz i przypisz to„ID”Atrybut z wybraną wartością.

Krok 2: Wstaw nagłówek

Następnie dodaj nagłówek do „”Element za pomocą„

”Tag. Następnie dodaj tekst pomiędzy tagami „”:

Zdjęcie w tle

Kolorowy obraz liści ustawiony jako tło tej strony. Teraz możemy zrobić dowolny dokument na tej stronie.

Krok 3: Ustaw obraz tła

Aby ustawić obraz elementu, najpierw dostęp do elementu za pomocą „ID" atrybut. Następnie dodaj „zdjęcie w tle”Właściwość CSS, aby ustawić obraz na odwrocie elementu. Wartość tej właściwości określa adres URL obrazu.

Krok 4: Spraw, by obraz tła responował

Aby obraz tła reagował, wstaw następujące właściwości CSS:

#img-background
Image tła: URL ('emoji.png ');
Wysokość: 100%;
szerokość: 100%;
Rozmiar tła: okładka;
Powtórzenie tła: bez powtórzenia;
Border: Auto Solid Red;

Opis wyżej wymienionego kodu jest wymieniony w następujący sposób:

• „„wysokość”Właściwość wykorzystywana do ustawiania wysokości elementu.
• "szerokość”Właściwość służy do definiowania rozmiaru elementu w poziomie.
• "Rozmiar tła„Właściwość służy do ustawiania rozmiaru obrazu. Na przykład mamy jego wartość jako „okładka„Aby wypełnić obraz w elemencie.
• "powtarzanie tła”Właściwość ustawia, czy obraz się powtórzy, czy nie.
• "granica”Funkcja jest wykorzystywana do dodawania granicy wokół elementu.

Można zaobserwować, że z powodzeniem sprawiliśmy, że obraz tła reagował:

Wyjaśniliśmy metodę dodawania responsywnego obrazu tła za pomocą CSS.

Wniosek

Aby dodać responsywny obraz tła CSS, najpierw utwórz pojemnik wraz z atrybutem „id”. Następnie uzyskaj dostęp do elementu DIV za pomocą „id” w CSS i osadzaj obraz tła za pomocą „zdjęcie w tle„Własność CSS. Po tym, "Rozmiar tła”,„powtarzanie tła", I "granica„Właściwości są również używane do reakcji obrazu. Ten post pokazał, jak ustawić responsywny obraz tła w CSS.