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

 

Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz   2.30 GHz

Intel(R) UHD Graphics (für Import, Verarbeitung, Export)

NVIDIA GeForce MX250 (wird nicht in Schnitt-SW verwendet)

    Video deluxe 2016 Premium
    Video deluxe 2026 Premium
    Video Pro X 17
    Photostory Deluxe 2026
    BorisFX Samplitude 2026
    ACID Pro 11
    Music Maker 2026 Premium
    MAGIX/XARA Graphic-/Web-Designer

 

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.6466

Firefox 150.0.1 (64-Bit)

geändert: 02.05.2026

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!