Frage zum Hintergrund

mysteria66 schrieb am 18.08.2013 um 12:35 Uhr

Hallo,


ich habe folgende Frage zur Gestaltung eines Hintergrunds. Die eigentliche Website ist 960px breit und wird zentriert dargestellt. Der Hintergrund hat einen roten Farbverlauf (läuft nach unten weiß aus). Nun möchte ich oben links und rechts von der Website eine Grafik auf dem Farbverlauf platzieren. Wie stelle ich das am geschicktesten an? Ziehe ich die Grafik über den Webdesigner einfach auf den Hintergrund oder bringt das Nachteile mit sich (z.B., dass diese Grafik dann nicht in allen Browsern dargestellt wird). Ich habe auch gesehen, dass wenn ich die Grafik zu weit links bzw. rechts von der Homepage platziere, dass die Grafik dann nicht mehr angezeigt wird. Alternativ würde ich gerne einen Hintergrund basteln, auf welchem die beiden Grafiken bereits enthalten sind. Wie stelle ich es aber an, dass die 2 Grafiken unabhängig vom Browser und der Bildschirmauflösung, immer links und rechts von der Website beginnen?

Ich hänge mal eine Grafik an, wo dass das Ganze besser aufgezeigt wird.

Besten Dank für eure Hilfe!

 

 

Kommentare

BilderMacher schrieb am 18.08.2013 um 21:29 Uhr

Um dir den richtigen Tipp geben zu können, ist es wichtig zu wissen, welden Web Designer du benutzt. Der neue Version 9 arbeitet und bedient sich etwas anders als seine Vorgänger.

Zuletzt geändert von BilderMacher am 18.08.2013, 21:29, insgesamt 1-mal geändert.

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

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

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

Hardware / Software:
::::::::::::::::::::::::::::::::::::++++:::::::::::::::::::::::::::::::::::::::::::::::::

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 2025
  • Samplitude X8 Suite
  • ACID Pro 11
  • Music Maker 2026 Premium
  • MAGIX/XARA Graphic-/Web-Designer

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

Edition    Windows 10 Home
Version    2009
Installiert am    ‎15.‎10.‎2020
Betriebssystembuild    19045.5965

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

Standardbrowser: Firefox 138.0.4

👶-Boomer

mysteria66 schrieb am 18.08.2013 um 21:56 Uhr

Hallo BilderMacher,

danke für Deine Antwort.

Ich arbeite mit der Webdesigner Version 8.

Beste Grüße

BeRo schrieb am 19.08.2013 um 18:07 Uhr

[...] Nun möchte ich oben links und rechts von der Website eine Grafik auf dem Farbverlauf platzieren [...]

Der einfachste Weg ist tatsächlich die Nutzung der drag & drop Funktion.

[...] Ziehe ich die Grafik über den Webdesigner einfach auf den Hintergrund [...]

Jein

Will sagen, nicht auf die Hintergrundebene ziehen sondern nur optisch auf den Hintergrund und definitiv in die MouseOff Ebene...

[...] Ich habe auch gesehen, dass wenn ich die Grafik zu weit links bzw. rechts von der Homepage platziere, dass die Grafik dann nicht mehr angezeigt wird [...]

Das ist richtig. Den Effekt kannst Du teilweise umgehen, wenn Du in der Website Einstellung, die Checkbox "Auf Seitenrand beschneiden" leer lässt (s. u.)

[...] Alternativ würde ich gerne einen Hintergrund basteln, auf welchem die beiden Grafiken bereits enthalten sind [...]

Vergiss das am besten...

Wenn Du einen Hintergrund als Grafik "bastelst", der auch sehr große Bildschirme im Vollbildmodus ausfüllt, kommst Du alleine dafür schnell auf einen Speicherbedarf von 10 MB und mehr.
Was das für einen Besucher bedeutet, der Deine Site mit einem Smartphone anzeigen will, kannst Du Dir vorstellen...

Eine praktikable Lösung kann IMHO so aussehen, wobei es egal ist, ob Du den WD8- oder eine neuere Version benutzt:


Die beiden Grafiken (Motorrad), die ich rechts- und links der Seite angebracht habe, stehen weit außerhalb der eigentlichen Seite. Dass sie später trotzdem zu sehen sind liegt an einem breiten, transparenten Rahmen, der "unter" der Grafik liegt und mit ihr gruppiert wurde. Dieser Rahmen ragt noch in die Seite hinein und sorgt dafür, dass die Grafik auch online noch zu sehen ist.


Jetzt noch bei der Einstellung für die Website, die Checkbox "Auf Seitenrand beschneiden" leeren...

 

...dann ist sichergestellt, dass die Grafiken an der richtigen Stelle zu sehen sind.

In der Vollbildansicht sieht das dann z. B. so aus:


Wenn Du mit der Umsetzung noch Probleme haben solltest, melde Dich einfach wieder.

Viel Erfolg

Zuletzt geändert von BeRo am 19.08.2013, 18:07, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mysteria66 schrieb am 20.08.2013 um 10:42 Uhr

@BeRo

 

Soweit alles verstanden. Ich sage vielen Dank!

 

An den Haken ""Auf Seitenrand beschneiden" hatter ich gedacht, aber auf den eigentlichen simplen Workaround mit dem transparenten Rahmen bin ich nicht gekommen. Wie einfach machmal doch alles sein kann ;-).

Hierzu vielleicht noch eine Frage. Verstehe ich das wie folgt richtig?

Ein Rechteck aufziehen, dieses transparent machen, die Grafik darauf platzieren und das Rechteck und die Grafik platzieren oder wie ist das mit dem transparenten "Rahmen" zu verstehen?

Noch einmal besten Dank! Du hilfst hier immer wieder klasse weiter!!

Besten Grüße

BeRo schrieb am 20.08.2013 um 10:59 Uhr

[...] wie ist das mit dem transparenten "Rahmen" zu verstehen? [...]

Genau so, wie Du es beschrieben hast

Ich habe lediglich anschließend noch das transparente Rechteck mit der Grafik gruppiert (s. Screenshot)



Wahrscheinlich funktioniert es aber auch ohne Gruppierung. Das Handling der kpl. (gruppierten) Grafik wird allerdings einfacher...

Viel Erfolg

Zuletzt geändert von BeRo am 20.08.2013, 10:59, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mysteria66 schrieb am 20.08.2013 um 18:46 Uhr

Hallo BeRo,

 

hat alles funktioniert.

Allerdings muss ich noch folgendes CSS Style hinterlegen, da sonst, je nach Bildschirmauflösung ein horizontaler Scrollbalken erscheint (die Grafiken könnten ruhig abgeschnitten sein).

 

<style type="text/css"> <!-- body { overflow-x: hidden; } --> </style>

 

Das würde bei einem festen Hintergrundbild natürlich nicht nötig sein. Auf der anderen Seite blähe ich halt die Datei nicht so auf.

 

Gruß

BeRo schrieb am 20.08.2013 um 19:34 Uhr

[...] da sonst, je nach Bildschirmauflösung ein horizontaler Scrollbalken erscheint [...]

Bei dem von Dir verwendeten Hintergrund (Verlauf) sollte unter keinen Umständen ein horizontaler Scrollbalken sichtbar werden.

Es sei denn, Du hast den Hintergrund als komplettes Bild erzeugt, z. B. in der Größe 1920 x 1200 px.

Was Du brauchst ist eine winzige Grafik, die in der Verlauffarbe angelegt wird und die z. B. 10 x 1200 px groß ist.
Diese Grafik ziehst Du dann bei gedrückter STRG-Taste auf den Hintergrund in das Editor Fenster des WD.
Der WD macht daraus automatisch eine für jede Bildschirmauflösung formatfüllende Grafik, die ohne Scrollbalken auskommt.

Eine passend Grafik (1,33 KB) kannst Du Dir hier herunterladen.

Viel Erfolg

Zuletzt geändert von BeRo am 20.08.2013, 19:34, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

mysteria66 schrieb am 21.08.2013 um 15:19 Uhr

Bei dem von Dir verwendeten Hintergrund (Verlauf) sollte unter keinen Umständen ein horizontaler Scrollbalken sichtbar werden.

 

Da habe ich mich vermutlich ungeschickt ausgedrückt. Nicht der Hintergrund (Farbverlauf) sondern die Grafiken links und rechts neben der eigentlichen Homepage rufen den Scrollbalken hervor. Nämlich immer dann, wenn die Bildschirmauflösung geringer als die Gesamtbreite (Homepage plus Grafiken) kleiner ist.

Gruß

BeRo schrieb am 21.08.2013 um 16:55 Uhr

[...] die Grafiken links und rechts neben der eigentlichen Homepage rufen den Scrollbalken hervor [...]

OK, das erklärt's...

In dem Fall kann ein passendes Stylesheet, wie von Dir verwendet, natürlich helfen. Die Alternative, die Seitenbreite zu verkleinern, ist ja nicht immer möglich, ohne das komplette Layout zu erneuern...

Zuletzt geändert von BeRo am 21.08.2013, 16:55, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓