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 / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

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)

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

  • Video deluxe 2016 Premium
  • Video deluxe 2025 Premium
  • Video Pro X 16
  • Photostory Deluxe 2025
  • Samplitude X7 Suite
  • ACID Pro 11
  • Music Maker 2025 Premium
  • MAGIX/XARA Graphic-/Web-Designer

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

Edition    Windows 10 Home
Version    22H2
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5011
Leistung    Windows Feature Experience Pack 1000.19060.1000.0

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

Standardbrowser: Mozilla Firefox 131.0.3 (64-Bit)

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!