Hintergrundbilder auf die gesamte Bildschirmbreite responsive machen?

Nina-D schrieb am 01.02.2023 um 13:01 Uhr

Hallo liebe Community,

es ist ja doch seit längerem recht schick, einzelne Passagen einer Website, wie den Header oder auch andere, mit einem Bild zu hinterlegen, das den gesamten Bildschirm füllt.

Hat hier jemand einen Tipp wie ich das machen kann?

Z.B. so wie bei der aktuellen WD-Verkaufseite von Magix:

https://www.magix.com/de/sem/web-designer/neuheiten/#c1587827

Ich meine nur das Hintergrundbild, zb ganz oben, auf die ganze Breite, nicht diesen "Scrolleffekt".
Wobei mir der Scroll-Effekt auch ein Rätsel ist, wie man den verwirklichen könnte.😅

Wenn ich mein Hintergrund einfach nur größer mache, sodass keine Seitenränder rechts und links mehr da sind, ist es nicht wirklich responsive. Wenn ich nämlich bei Magix die Seite verkleinere, entsteht nie ein Rand beim Hintergrundbild.

Ich hoffe, ihr versteht was ich meine und könnt mir da einen Tipp geben?

Kommentare

BilderMacher schrieb am 01.02.2023 um 14:50 Uhr
es ist ja doch seit längerem recht schick, einzelne Passagen einer Website, wie den Header oder auch andere, mit einem Bild zu hinterlegen, das den gesamten Bildschirm füllt.

Hat hier jemand einen Tipp wie ich das machen kann?

Über das Kontextmenü kann man einstellen, ob fixiert und/oder ausgedehnt ...

Z.B. so wie bei der aktuellen WD-Verkaufseite von Magix:

https://www.magix.com/de/sem/web-designer/neuheiten/#c1587827

Ich meine nur das Hintergrundbild, zb ganz oben, auf die ganze Breite, nicht diesen "Scrolleffekt".
Wobei mir der Scroll-Effekt auch ein Rätsel ist, wie man den verwirklichen könnte.😅

Zum Scrolleffekt ...

https://www.magix.info/de/forum/scroll-animation-paralax--1236672/#ca1508934

 

"Je mehr die Menschen wissen, desto weniger müssen sie glauben!"

+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+
Ich kann vieles, darf aber nicht alles.
+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+

-------------

Hardware:

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz (8 CPUs), ~2.3GHz
12288 MB RAM
DirectX 12
Intel(R) UHD Graphics (für Import, Verarbeitung, Export [Video deluxe 2023 | Video Pro X 14 | Photostory Deluxe 2023])
NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

-----------------------------------------------------------------------------------

Edition:  Windows 10 Home
Version: 22H2
Betriebssystembuild    19045.2604
Leistung: Windows Feature Experience Pack 120.2212.4190.0

------------------------------------------------------------------------------------

Nina-D schrieb am 01.02.2023 um 15:14 Uhr

Hallo Bildermacher,

oh, vielen lieben Dank 🌼😀 Du hast mein Rätsel gelöst. Ich hätte ja nicht gedacht, dass es so einfach sein könnte, das Bild als "ausgedehnt" einzustellen.😅👍

Nun hat dieser Scrolleffekt auch einen Namen bekommen. Also Paralax-Effekt. Darüber werde ich mich dann auch mal schlau machen.

Dann bekommt meine Seite ein schickeres Update demnächst!