Podczas tworzenia strony internetowej lub pisząc post na blogu, obrazy odgrywają istotną rolę w uczynieniu rzeczy bardziej atrakcyjnym i zrozumiałym. Bez zdjęć, niezależnie od tego, czy jest to blog, czy strona internetowa, staje się nudna, a czytelnicy zaczynają tracić zainteresowanie. Obrazy tła mają również pragmatyczny wpływ na interaktywność strony internetowej.

W tym artykule zawiera szczegółowy przewodnik dodania obrazu tła w HTML. Ponadto ten artykuł zawiera następujące wyniki dotyczące:

• Jak dodać obraz tła w HTML
• Jak dodać obraz tła do znacznika w HTML
• Jak dodać obraz strony internetowej w HTML
• Jak uniknąć powtarzania obrazu tła
• Jak pokryć całe tło bez powtórzenia
• Jak rozciągnąć obraz tła w HTML

Jak dodać obraz tła w HTML

W HTML możemy dodać obraz tła, używając obrazu tła właściwości CSS. Obraz tła jest używany jako tapeta na stronie internetowej lub jako obraz okładki suwaka. Składnia właściwości „Image w tle” jest napisana poniżej:

Image tła: URL („Nazwa obrazu”);

Powyższa składnia jest właściwością CSS i może być używana w zewnętrznym arkuszu stylów, wewnętrznych CSS lub CSS.

Przykład

Dla lepszego zrozumienia ćwiczy się następujący kod HTML, aby dodać obraz tła w HTML.

To jest obraz

W tym przykładzie używamy właściwości obrazu tła w

znacznik, aby dodać obraz tła.

Wyjście

Wyjście pokazuje, że w HTML obraz tła można dodać za pomocą właściwości CSS.

Jak dodać obraz tła do znacznika w HTML

Możemy również dodać obraz tła w akapicie, używając wewnętrznego, wbudowanego lub zewnętrznego CSS. Możemy użyć obrazu tła do akapitu, aby tworzyć różne projekty.

Przykład

Tło akapitu

Niniejszy akapit jest napisany w celu zademonstrowania użycia obrazu tła za pomocą akapitu.
Niniejszy akapit jest napisany w celu zademonstrowania użycia obrazu tła za pomocą akapitu. Niniejszy akapit jest napisany w celu zademonstrowania użycia obrazu tła za pomocą akapitu.
Niniejszy akapit jest napisany w celu zademonstrowania użycia obrazu tła za pomocą akapitu. Niniejszy akapit jest napisany w celu zademonstrowania użycia obrazu tła za pomocą akapitu.

W tym przykładzie używamy obrazu tła, aby zmienić tło akapitu.

Wyjście

Wyjście pokazuje, że dodajemy obraz tła do akapitu za pomocą właściwości obrazu tła.

Jak dodać obraz strony internetowej w HTML

Zwykle tło strony internetowej jest białe, ale możemy również zmienić tło strony internetowej za pomocą właściwości obrazu tła na tag HTML. zdjęcie w tle.

Przykład

Tło nadwozia

Podczas tworzenia strony internetowej lub pisząc post na blogu, obrazy odgrywają istotną rolę w uczynieniu rzeczy bardziej atrakcyjnym i zrozumiałym. Bez zdjęć, niezależnie od tego, czy jest to blog, czy strona internetowa, staje się nudna, a czytelnicy zaczynają tracić zainteresowanie.

W tym przykładzie zmieniamy tło strony internetowej, dodając obraz tła do htmlbody.

Wyjście

To wyjście pokazuje, że właściwość obrazu tła ustawiła obraz na całej stronie.

Jak uniknąć powtarzania obrazu tła

Gdy dodamy tło na stronie internetowej, obraz powtarzaj się, aby pokryć całą stronę, jak pokazano poniżej:

Aby uniknąć powtarzania obrazu, używamy właściwości CSS powtarzanie tła i ustaw swoją wartość bez powtórki Jak pokazano w następujących wyjściach:

Przykład

W tym przykładzie usuwamy powtórzenie obrazu za pomocą właściwości CSS powtarzania tła.

Wyjście

Wyjście pokazuje, że po użyciu Powtórzenie tła: bez powtórzenia; Obrazy właściwości osiągają ich oryginalny rozmiar i pozostawiają puste resztę strony.

Jak pokryć całe tło bez powtórzenia

Rozmiar tła I Przywiązanie do tła Właściwości można użyć do ustawienia obrazu na całym tle. Aby to zrobić, musisz użyć okładka I naprawił wartości Rozmiar tła I Przywiązanie do tła nieruchomości.

Przykład

W tym przykładzie użyliśmy Rozmiar tła: okładka Aby dodać obraz tła do całej strony internetowej bez powtórzenia. I Przywiązanie do tła: Naprawiono właściwość usuwa efekt przewijania.

Wyjście

Powyższe dane wyjściowe pokazuje, że właściwość rozmiaru tła obejmuje całą stronę internetową, ale pozostaje przewijana, więc aby usunąć efekt przewijania, użyliśmy właściwości w tle Attachment.

Jak rozciągnąć obraz tła w HTML

Możesz rozciągnąć obraz tła, aby uniknąć powtórzenia obrazu. Aby to zrobić, Rozmiar tła I Przywiązanie do tła Właściwości CSS.

Przykład

W tym przykładzie użyliśmy Rozmiar tła: 100% 100%. Pierwsza 100 odnosi się do szerokości, a druga 100 identyfikuje wysokość, która ostatecznie rozciąga obraz. Chwila Przywiązanie do tła: Naprawiono

Wyjście

Powyższe dane wyjściowe pokazuje właściwość rozmiaru tła, aby rozciągnąć obraz, ale pozostaje ona przewijana, więc aby usunąć efekt przewijania, użyliśmy właściwości przywiązania tła.

Wniosek

W html, zdjęcie w tle właściwość służy do dodania obrazu tła . Ten artykuł ma na celu dodanie obrazu tła w HTML. Obraz tła można dodać do jednego elementu HTML lub na całej stronie internetowej. Ponadto obraz tła można dostosować za pomocą różnych właściwości CSS, takich jak właściwości rozmiar. Zapewniliśmy również wgląd w wykorzystanie tych właściwości do manipulowania obrazem tła. zdjęcie w tle.