Hintergrundbild - oberer Bereich leer

17.04.2023 11:49 (zuletzt bearbeitet: 17.04.2023 12:05)
avatar  Knox
#1 Hintergrundbild - oberer Bereich leer
avatar
Mitglied

Hi
Ich habe ein Hintergrundbild (1921x1201) eingefügt.
Ich habe hier im Forum gesucht und einmal etwas gefunden was vielleicht hilft, aber den Beitrag finde ich jetzt nicht mehr.
Ich möchte das der Hintergrund sich nicht wiederholt. Was er aktuell auch nicht tut, dafür habe ich das eingegeben

body {
background-image:url("//files.homepagemodules.de/b855163/a_24_84e4c5a0.png");
background-repeat: no-repeat;
}

Aber die oberen paar cm sind jetzt einfach leer. Wie kann ich es schaffen dass das Bild ganz oben anfängt? Das wäre wichtig weil, ich habe vor auf der Seite des Bildes ein paar Figuren zu platzieren die sich nach unten bis zum Bildrand erstrecken. Dafür versuche ich grade herauszufinden wo das Hintergrundbild anfängt und wo es aufhört.
und das Bild sollte ganz oben beginnen und unten bündig aufhören.

Danke im Voraus

Edit: Ok ich habe verstanden dass, das Bild unten Bündig ist, aber es reicht nicht bis nach Oben?
Grösser darf ich aber nicht hochladen. Wenn es nach unten nicht reichen würde, wäre das weniger schlimm, wichtig ist mir grade nur, dass das Bild oben bündig ist. Wenn es möglich ist es unten auch hinzukriegen ohne das Bild zu verzerren: super, aber wenn nicht, wäre nicht so schlimm. Weil dort sowieso die Fusszeile ist.


 Antworten

 Beitrag melden
17.04.2023 12:18
avatar  Ingmar
#2 RE: Hintergrundbild - oberer Bereich leer
avatar
Technik

body {
background-image:url("//files.homepagemodules.de/b855163/a_24_84e4c5a0.png");
background-repeat: no-repeat;
background-position: top left;
}

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
17.04.2023 12:23
avatar  Knox
#3 RE: Hintergrundbild - oberer Bereich leer
avatar
Mitglied

Danke das funktioniert fast. Jetzt ist der obere Bereich hinter dem Header versteckt. Wie kann ich es individuell ein stück nach unten schieben?


 Antworten

 Beitrag melden
17.04.2023 13:30
avatar  Ingmar
#4 RE: Hintergrundbild - oberer Bereich leer
avatar
Technik

Du kannst das auf unterschiedliche Arten steuern:

https://developer.mozilla.org/en-US/docs...etiredLocale=de

Also z.B.

1
 
background-position: 100px left;
 



um das ganze linksbündig 100 Pixel von oben beginnen zu lassen.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
17.04.2023 14:08 (zuletzt bearbeitet: 17.04.2023 14:10)
avatar  Knox
#5 RE: Hintergrundbild - oberer Bereich leer
avatar
Mitglied

Vielen Dank, das teste ich später.
Ich hatte ein Beispiel bild gemacht und den Bereich hinter dem Header markiert.
Der Markierte Bereich ist hinter dem Header nicht sichtbar. Auf der Mobilen Ansicht am Handy jedoch schon, weil kein Header vorhanden/schmaler ist.
Wenn ich das runterschiebe, wird wahrscheinlich dafür auf der Mobilen Ansicht der obere Bereich leer sein. Gibt es eine Option um das zu vermeiden? So dass es in der mobilen Ansicht auch/trotzdem oben beginnt?

Sry ich lerne CSS grade erst.


 Antworten

 Beitrag melden
18.04.2023 08:26 (zuletzt bearbeitet: 18.04.2023 08:35)
avatar  Knox
#6 RE: Hintergrundbild - oberer Bereich leer
avatar
Mitglied

habe diverse Xpx left getestet, aber bewegt sich kein stück
hab es auch mit % versucht - nichts


 Antworten

 Beitrag melden
18.04.2023 08:41 (zuletzt bearbeitet: 18.04.2023 08:47)
avatar  Knox
#7 RE: Hintergrundbild - oberer Bereich leer
avatar
Mitglied

Es hat geklappt mit:

body {
background-image:url("//files.homepagemodules.de/b855163/a_31_06f216cb.png");
background-position-y: 30%;
background-repeat: no-repeat;
}

Aber wie befürchtet ist der obere Teil in der mobilen Ansicht leer


 Antworten

 Beitrag melden
18.04.2023 10:20
avatar  Ingmar
#8 RE: Hintergrundbild - oberer Bereich leer
avatar
Technik

Zitat von Knox im Beitrag #7


Aber wie befürchtet ist der obere Teil in der mobilen Ansicht leer



Du kannst diese Einstellung auf XXXS stellen, um den Header immer anzuzeigen.
Allerdings ist es nicht ganz einfach ein Hintergrundbild zu finden, das auf allen Endgeräten sinnvoll angezeigt werden kann.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!