Obecnie istnieje zapotrzebowanie na strony internetowe z responsywnymi obrazami tła. Responsywne strony internetowe zapewniają użytkownikom idealne wrażenia z korzystania z niemal wszystkich urządzeń, w tym telefonów komórkowych, tabletów i komputerów stacjonarnych. Responsywne obrazy mogą dostosować tło witryny, rozmiar ekranu i wymiary. Responsywne obrazy zapewniają zachowanie jakości i proporcji. Dodatkowo strona z responsywnymi obrazami tła ładuje się szybko.
W tym przewodniku znajdują się instrukcje dotyczące dostosowywania obrazów tła do wymiarów ekranu.
Jak dostosować obrazy tła do wymiarów ekranu?
Obraz można dostosować do wymiarów ekranu, postępując zgodnie z instrukcjami podanymi poniżej.
Krok 1: Utwórz strukturę HTML
Najpierw utwórz strukturę HTML i dodaj zewnętrzny arkusz stylów za pomocą tag w sekcji head HTML. W tym celu po prostu umieść „ ” wewnątrz znacznika głowy. „ wzgl ” określa powiązanie pliku z dokumentem HTML. „ href ” określa adres pliku CSS:
< HTML >
< głowa >
< połączyć rel = „arkusz stylów” href = „styl.css” >
< tytuł > Responsywny obraz tła tytuł >
głowa >
< ciało >
-- Obszar do dodania innej zawartości-- >
ciało >
HTML >
Krok 2: Zastosuj CSS
Teraz zastosuj CSS do „ ciało ' Sekcja. Najpierw określ obraz tła. W tym celu użyj „ zdjęcie w tle ” i określ „ adres URL() ” wartość zawierająca adres pliku obrazu.
Następnie użyj przycisku „ zdjęcie w tle ”, aby określić rozmiar obrazu, „ powtarzanie tła ” właściwość ustawiającą powtarzalność obrazu oraz „ załącznik w tle ”, aby ustawić, czy obraz będzie przewijany wraz z resztą strony, czy nie. Na koniec ustaw „ margines ' I ' wyściółka ' Do ' 0 ”:
ciało {obraz tła: url ( „obraz-testowy.jpg” ) ;
rozmiar tła: 100 % 100 % ;
/* Skaluj obraz do 100 % szerokość i 100 % wysokość */
powtarzanie w tle: brak powtórzeń;
załącznik w tle: naprawiony;
margines: 0 ;
wyściółka: 0 ;
/* Opcjonalnie: Naprawiono tło */
}
Wyjście
To jest wynik przed zaciśnięciem okna przeglądarki:
Po skurczeniu przeglądarki:
Powyższe wyjście potwierdza, że obraz dostosował tło do wymiarów ekranu.
Wniosek
Aby dostosować obrazy tła do wymiarów ekranu, najpierw dołącz „ rzutnia ” w sekcji nagłówka, aby kontrolować wymiary i skalowanie. Następnie utwórz strukturę HTML i zastosuj CSS. W CSS ustaw „ rozmiar tła ” wartość właściwości do „ okładka ”, aby przeskalować wysokość i szerokość obrazu. W artykule przedstawiono kompletny przewodnik dotyczący dostosowywania obrazów tła do wymiarów ekranu.