Jak mogę sprawić, aby obraz był kontynuowany w wielu sekcjach z przerwami pomiędzy? - html, css, image, style

Pracuję z prostymi kodami HTML i CSS, ale nie mogę wymyślić, jak osiągnąć efekt, na który idę. Oto jak to wygląda teraz. Obraz tła jest tłem dlaSekcja kontenera i każde czerwone pole to sekcja w tym kontenerze. Podoba mi się, że obraz tła jest ciągły w polach (tzn. Nie jest powtórzony), ale chciałbym, aby nie pojawiał się w przestrzeni między polami. Czy istnieje sposób, aby to osiągnąć?

Odpowiedzi:

Istnieje kilka rozwiązań, w zależności od szczegółów tego, co chcesz:

Jeśli przestrzenie będą małe i chcesztło wszędzie na całej stronie, możesz użyć css do zastosowania obramowań do twoich skrzynek, które będą renderować "na wierzch" tło, które zastosowałeś. Umieszczenie obramowania po prawej stronie na dziale "ZESPÓŁ" i obramowaniu u dołu w prawym górnym dziale, stworzy "separację", o której mówisz.

Jeśli chcesz tło tylko w sekcjachzaznaczone na czerwono, możesz rozważyć usunięcie tła z elementu z tyłu i zastosować go do każdego div osobno. Używając położenia tła, możesz sprawić, że tło wygląda jak jeden stały element, oddzielony jedynie spacją między polami.

Przykład pseudo-css:

div.team,
div.top_right,
div.bottom_right {
background: transparent url(image/my_bg_image.jpg) 0 0 no-repeat;
}

div.top_right {
background-position: -500px 0; /* assumes the team div was 500px wide */
}

div.bottom_right {
background-position: -500px -250px; /* assumes the top_right div is 250px tall */
}