Elementy tła wychodzące poza sekcje - jak zrobić taki design

Hej, spotkałem się z takim designem już wcześniej. Ale, zastanawiam się jak to najlepiej zrobić. Na pewno jednym sposobem jest zrobienie sekcji, w której jako background image będzie tak naprawdę tło z trzema kolorami (tak, żeby zawrzeć część kolorów poprzedniej i następnej sekcji, dzięki czemu tworzy się iluzja, że obrazy wychodzą do następnych). Zastanawiam się czy są jeszcze jakieś inne (być może lepsze) sposoby?

Czy trzeba designera zawsze poprosić o wyrenderowanie i zapewnienie takiego właśnie background image-u?

Rozumiem, że responsywność najlepsza w takim wypadku, to po prostu przycinanie tła (tak, żeby nie zmieniać jego ratio), aż do momentu dojścia do formularza, ewentualnie jakiegoś innego break-pointu?

Developer tools Twoim przyjacielem :)
Zwyczajowo to po prostu elementy HTML z obrazkiem i position: relative

tenTamten napisał(a):

Developer tools Twoim przyjacielem :)
Zwyczajowo to po prostu elementy HTML z obrazkiem i position: relative

no właśnie dzięki developer tools, widziałem kiedyś takie rozwiązanie zrobione tak jak opisuję wyżej.

Ty robiłbyś to position relative? Możesz trochę bardziej opisać?

tenTamten napisał(a):

Developer tools Twoim przyjacielem :)
Zwyczajowo to po prostu elementy HTML z obrazkiem i position: relative

rozumiem, że background z tymi które nie wychodzą, a potem na nim formularz i te dwa zdjęcia które wychodzą po prostu jako elementy w divie i offsetować je?

Tak dokładnie. Główny element z background, a w tym elemencie trzy kolumny i pierwsza i ostatnia ukrywana dla mobilek jak się mało miejsca robi. I po prostu odpiwiedni offset.
Ale ja to janusz fronendu jestem, zaraz pewnie będę zbesztany, żę tak to się robilo X lat temu :P

tenTamten napisał(a):

Developer tools Twoim przyjacielem :)

a właśnie btw, to jest zdjęcie z Figmy, dlatego pytam, developer tools tu trochę nie bardzo trochę:P

• Albo korzystając z pozycjonowania absolutnego: position:relative/position:absolute + top,left,right,bottom
• Albo korzystając z systemu pudełkowego: ujemny margin-top/margin-bottom/margin-left/margin-right
• Albo korzystając z CSS3: translate()/scale()

Riddle napisał(a):

• Albo korzystając z pozycjonowania absolutnego: position:relative/position:absolute + top,left,right,bottom
• Albo korzystając z systemu pudełkowego: ujemny margin-top/margin-bottom/margin-left/margin-right
• Albo korzystając z CSS3: translate()/scale()

rozumiem, że w szczegółach by to wyglądało tak jak tutaj opisałem?

B.Eng napisał(a):

rozumiem, że background z tymi które nie wychodzą, a potem na nim formularz i te dwa zdjęcia które wychodzą po prostu jako elementy w divie i offsetować je?

i oprócz tego jeśli robić to osobnymi elementami (w sensie jako osobne obrazy), to rozumiem, że na parencie overflow: hidden, a na tych obrazach fixed width/height, tak, żeby nie zmienić im aspect ratio przy zmniejszaniu ekranu?

B.Eng napisał(a):

Hej, spotkałem się z takim designem już wcześniej. Ale, zastanawiam się jak to najlepiej zrobić. Na pewno jednym sposobem jest zrobienie sekcji, w której jako background image będzie tak naprawdę tło z trzema kolorami (tak, żeby zawrzeć część kolorów poprzedniej i następnej sekcji, dzięki czemu tworzy się iluzja, że obrazy wychodzą do następnych). Zastanawiam się czy są jeszcze jakieś inne (być może lepsze) sposoby?

Czy trzeba designera zawsze poprosić o wyrenderowanie i zapewnienie takiego właśnie background image-u?

Ale po co to renderować jako jedno wielkie tło?

Każdy element (metaliczne coś, kuleczka, stożek, kostka, walec) można nagrać jako osobny png w taki sposób, żeby był przezroczysty (dlatego png, które ma przezroczystość, a nie jpg).

No chyba, że efekt wizualny nie będzie zadowalający. Mogę sobie wyobrazić sytuację, gdzie na krawędziach, gdzie wyrenderowany obiekt styka się z tłem, byłyby jakieś zgrzyty. Ale to wtedy można przemyśleć dopiero sprawę, gdyby coś takiego wystąpiło i ewentualnie z braku laku nagrać to razem z kawałkiem tła.

Natomiast nagranie tych obiektów jako osobne pliki i osadzenie każdego osobno wydaje się najprostszą rzeczą, jaką można zrobić, więc po co kombinować już na starcie? A mając każdy plik osobno, możesz to potem łatwo dostosować pod RWD choćby. Albo zmienić kolor tła bez konieczności ponownego renderowania plików graficznych.

Overflow: clip i odpowiedni z-index względem tła i ma grać

nabazgrałem coś w sumie, jak by ktoś był ciekawy: https://codepen.io/tikej/pen/MWxXgzO?editors=1100

@LukeJL @Riddle wielkie dzięki za odpowiedzi, mało co bym tego tym do pupy sposobem nie zrobił z góry :P

jakbyście (albo jakby ktoś chciał ocenić) to w sumie chętnie przyjmę krytykę, aczkolwiek wydaje mi się, że wyszło całkiem spoko. Przy zmniejszaniu ekranu form ma jakąś tam minimalną odległość od obrazów, ale oprócz tego jakaś responsywność jest i zachowują ratio obrazy, więc całkiem spoko chyba (w sensie, rzeczy przynajmniej których się najbardziej obawiałem się udało, ale jak czegoś nie uwzględniłem o czym warto pamiętać, to chętnie posłucham)

super, w sumie, nie takie trudne się wydaje teraz !

*edit: copyright note for lawyers: nie jestem właścicielem obrazków jak by co i nie mam do nich praw autorskich