Domyślnie na stronie internetowej obraz pojawia się w lewym górnym rogu ekranu i jest powtarzany poziomo i pionowo. Jednak, aby zmienić obecną pozycję, CSS oferuje „pozycja w tle„Właściwość, która określa pozycję obrazu tła, taka jak centrum.

W tym artykule dowiemy się, jak ustawić pozycję obrazu tła za pomocą przykładów. Aby to zrobić, po pierwsze, zademonstrujemy procedurę dodania obrazu jako tła w CSS.

Dodaj obrazy tła za pomocą właściwości „Image w tle”

Do dodawania obrazów w tle „zdjęcie w tle”Nieruchomość jest wykorzystywana.

Składnia

Poniżej znajduje się składnia do ustawienia obrazu tła na element HTML:

Image tła: url ();

Tutaj, "URL ()”Określa nazwę obrazu lub ścieżkę folderu obrazu, w której istnieje.

Teraz przejdź do praktycznego przykładu korzystania z właściwości obrazu tła.

Przykład: Wstawienie obrazu tła za pomocą CSS

W tym przykładzie utworzymy

element i tło zostaną dodane za tym elementem. Możesz dodać elementy zgodnie z wyborem i zastosować do niego właściwość obrazu tła:

Linuxhint

Następnie przejdź do CSS, użyj „zdjęcie w tle”Właściwość, przypisz ścieżkę obrazu lub nazwę w AS„URL ()„Wartość właściwości obrazu tła:

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

To da następujący wynik:

W ten sposób możesz dodać obraz tła w CSS.

Jak wyśrodkować obrazy w tle za pomocą właściwości CSS „Pozycja w tle”?

„„pozycja w tle”Właściwość ustawia pozycję obrazu tła. Składnia będzie następująca:

Upozycja tła: wartość

Położenie obrazu można określić jako bezwzględne, lewe lub prawe. Mówiąc dokładniej, ustawienie „Centrum„Wartość wyśrodkowałby dodany obraz tła.

Przejdźmy teraz do praktycznego przykładu, który pokazuje, jak korzystać z właściwości pojęcia tła i pozycji tła w CSS.

Przykład: Jak ustawić obraz tła w środku?

Ustawimy kolor tła i ścieżkę obrazu za pomocą „tło" nieruchomość. Następnie wykorzystamy „pozycja w tle„Właściwość, aby ustawić obraz tła w centrum. Wreszcie ustawym „powtarzanie tła„Własność do bez powtórzenia za nie powtarzanie obrazu:

ciało
Tło: RGB (128, 44, 12) URL („Zdjęcie.jpg ") naprawione;
Upozycja tła: Center;
Powtórzenie tła: bez powtórzenia;

Po zakończeniu wykonaj kod i rzućmy okiem na ostateczny wynik:

Nasz obraz tła jest pomyślnie umieszczony w środku strony.

Wniosek

Obrazy tła można dodać za pomocą właściwości obrazu tła, podczas gdy pozycja tła można ustawić za pomocą właściwości pozycji tła. W centrum obraz tła w CSS ustawia wartość właściwości pozycji tła, aby „Centrum". Artykuł szczegółowo wyjaśnia, jak dodać obraz do tła za pomocą „zdjęcie w tle”I jak ustawić swoją pozycję za pomocą„pozycja w tle" nieruchomość.