W HTML obrazy tła są używane do stylu i poprawy wyglądu stron internetowych. Domyślnie obrazy strony internetowej są wyświetlane w lewym górnym rogu ekranu. Jednak możesz zmienić rozmiar obrazu w trybie pełnym ekranem. CSS zapewnia „pozycja w tle" I "Rozmiar tła”Właściwości, które można użyć do wymuszenia obrazu do wyświetlenia na całym ekranie.

W tym podręczniku poznasz metodę dodawania obrazu tła w trybie pełnego ekranu.

Zacznijmy!

Jak zrobić pełny obraz tła za pomocą CSS?

Aby uczynić tło pełnoprawne za pomocą CSS, najpierw utwórz DIV i dostosuj jego szerokość i wysokość oraz margines, aby pojawić się na pełnym ekranie za pomocą ”szerokość”,„wysokość", I "margines„Właściwości CSS. Następnie dodaj wokół niej granicę, używając „granica" nieruchomość. Aby ustawić granicę zgodnie z ekranem, użyj „rozmiar pudełka" nieruchomość. Po zakończeniu wykorzystamy własność „tło„Aby dodać obraz w tle.

Składnia właściwości tła to:

Tło: Image tła (URL) powtórzenie tła pozycja tła/ rozmiar tła

W powyższej składni wymienionej wymieniono następujące cztery właściwości właściwości tła:

• zdjęcie w tle: Jest wykorzystywany do dodania obrazu jako tła.
• powtarzanie tła: Służy do ustawienia wzorca powtórzenia obrazu tła, takiego jak bez powtórzenia, powtórzenie.
• pozycja tła: Służy do dostosowania położenia obrazu, takiego jak środek, lewy i prawy.
• Rozmiar tła: Służy do ustawiania rozmiaru obrazu, takiego jak automatyczne, osłony i długość.

Przejdźmy do przykładu, w którym zrobimy pełny obraz tła za pomocą CSS.

Przykład

W HTML utworzymy kontener i ustawimy jego nazwę klas jako „div”I dodaj nagłówek za pomocą

etykietka. Ponadto, aby umieścić nagłówek na środku strony, użyjemy znacznika.

Html

Witamy w Linuxhint

Następnie przypisz wartość właściwości marży jako „0”I wysokość jako„100px„Do całego ciała HTML.

CSS

html, ciało
Margines: 0;
Wysokość: 100%;

W następnym etapie stygnij utworzony pojemnik za pomocą „div”I dostosuj szerokość i wysokość Div jako„100px". Użyjemy właściwości granicznej, aby dodać granicę wokół div z „25px„Szerokość, styl jako„rowek”I kolor granicy jako„RGB (184, 147, 147)”:

div
szerokość: 100%;
Wysokość: 100%;
Border: 25px Groove RGB (184, 147, 147);

Wynik wyżej wymienionego kodu podano poniżej. Widać, że tworzone są nagłówek i granica:

Notatka: Jak widać, na powyższej granicy obrazu z prawej i dolnej jest ukryta, dzieje się tak, ponieważ szerokość i wysokość Div są już „100%”, Więc kiedy dodamy granicę, dodano dodatkową szerokość i wysokość. Aby tego uniknąć, użyjemy „rozmiar pudełka„Własność CSS, ponieważ pozwala nam uwzględnić granicę w szerokości i wysokości elementu.

Aby to zrobić, ustawimy wartość rozmiaru pudełka jako „Box-box”Aby uwzględnić granicę w całkowitej szerokości i wysokości Div:

Rozmiar pola: granica;

Poniższy obraz wskazuje, że granica jest skutecznie umieszczona w szerokości i wysokości Div:

Teraz dodamy obraz tła za pomocą „zdjęcie w tle”Właściwość i określ adres URL obrazu jako„URL (obraz.JPG)”:

div
Tło: URL („Obraz.jpg ");

Na zdjęciu poniżej widać, że obraz tła jest pomyślnie dodany, ale jest powtarzalny:

Aby uniknąć powtórzenia obrazu, „powtarzanie tła”Nieruchomość jest wykorzystywana. Tutaj ustawimy wartość powtarzania tła jako „bez powtórki”:

div
Image tła: URL („Obraz.jpg ");
Powtórzenie tła: bez powtórzenia;

W podwładnym wyjściu widać, że powtórzenie obrazu zostało zatrzymane; Jednak obraz nie jest wyświetlany na ekranie:

Aby wyświetlić obraz na pełnym ekranie, użyjemy „Rozmiar tła" nieruchomość. I ustaw swoją wartość jako „okładka”, Co oznacza, że ​​obraz obejmie cały obszar utworzonego pojemnika:

div
Image tła: URL („Obraz.jpg ");
Powtórzenie tła: bez powtórzenia;
Rozmiar tła: okładka;

Poniższy obraz wskazuje, że obraz jest wyświetlany na pełnym ekranie i odcinany. Wynika to z faktu, że rozmiar obrazu jest większy niż rozmiar DIV:

Aby rozwiązać ten problem, użyj „pozycja w tle”Właściwość i ustaw pozycję obrazu jako„Centrum”:

div
Image tła: URL („Obraz.jpg ");
Powtórzenie tła: bez powtórzenia;
Rozmiar tła: okładka;
Upozycja tła: Center;

W rezultacie wybrany obraz zostanie wyświetlony w trybie pełnego ekranu:

Otóż ​​to! Wyjaśniliśmy metodę wykonania pełnego ekranu obrazu tła za pomocą CSS.

Wniosek

Aby utworzyć pełny obraz tła za pomocą CSS, najpierw utwórz div i ustaw szerokość, wysokość i margines, aby wypełnić ekran. Następnie utwórz granicę wokół div, a następnie dodaj do niej obraz za pomocą „zdjęcie w tle" nieruchomość. Aby dostosować obraz zgodnie z pełnym ekranem, użyj „powtarzanie tła”,„Rozmiar tła", I "pozycja w tle" nieruchomości. W tym artykule wyjaśniono pełną metodę wykonania pełnego ekranu obrazu tła za pomocą CSS.