• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Fixed Background-Image relativ zentrieren

H

Hustensaft

Neues Mitglied
Hey alle zusammen,
ich habe eine kleine Seite mit einem Div-Element, was sich über die volle Breite der Seite erstreckt und eine Höhe von 300px hat. Nun möchte ich darin ein fixiertes Hintergrundbild zentrieren. Dabei aber nicht auf die herkömmliche Weise wie man es mit ein paar CSS-Attributen hinbekommt, sondern so, dass der Mittelpunkt des Bildes beim Laden der Seite auch vertikal mittig vom Div ist! Dass sich das beim Scrollen natürlich verändert ist mir klar. ;) Mit CSS habe ich derzeit noch keine Lösung gefunden. Wäre aber über jede Hilfe dankbar. Und meinetwegen kann die Lösung auch etwas Javascript enthalten.

Grüße,
Hustensaft
 
Werbung:
HTML: 
<!DOCTYPE html>
<html lang="de">
<head>
<title>Test</title>
<meta charset="UTF-8">
<style type="text/css">
.content {
  width: 100%;
  height: 300px;
  background-image: url(./images/bild.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="content">
  Zentriertes Hintergrundbild
</div>
</body>
</html>
 
Leider ist es das noch nicht ganz... Die selbe Idee hatte ich ja auch. Aber der Plan ist ( hatte ich oben leider vergessen zu schreiben), dass das Bild deckend ist, also dass man keinen weißen Rand sieht. Aber dann funktioniert die Positionierung 50% 50% leider nicht mehr... :-/
 
Werbung:
Ähm, jetzt verstehe ich noch weniger als vorher. Wenn die Hintergrundgrafik die komplette Fläche ausfüllen soll, hat das ja mit zentrieren nichts mehr zu tun.
 
Hustensaft schrieb:
Leider ist es das noch nicht ganz... Die selbe Idee hatte ich ja auch. Aber der Plan ist ( hatte ich oben leider vergessen zu schreiben), dass das Bild deckend ist, also dass man keinen weißen Rand sieht. Aber dann funktioniert die Positionierung 50% 50% leider nicht mehr... :-/
Zum Vergrößern anklicken....

Code: 
background-image:url(1.jpg);
background-size:cover;
 
Es hat schon was damit zu tun. Es geht darum, dass Bild vertikal mittig zu positionieren. Wenn euer Bild ein 16:9-Format hat, dann ist logisch, dass unten und oben was in dem 300px hohen DIV abgeschnitten wird, wenn es sich bei einem großen Monitor über hundert Prozent der Breite erstreckt. Das ganze soll als Header-Bild dienen. Und das was das zentrale Objekt in diesem Bild ist (mittig), soll auch zu sehen sein!
bildschirm.png
 
Werbung:
Hustensaft schrieb:
Es hat schon was damit zu tun. Es geht darum, dass Bild vertikal mittig zu positionieren. Wenn euer Bild ein 16:9-Format hat, dann ist logisch, dass unten und oben was in dem 300px hohen DIV abgeschnitten wird, wenn es sich bei einem großen Monitor über hundert Prozent der Breite erstreckt. Das ganze soll als Header-Bild dienen. Und das was das zentrale Objekt in diesem Bild ist (mittig), soll auch zu sehen sein!
bildschirm.png
Zum Vergrößern anklicken....

Ich ergänze ...
Code: 
background-image:url(1.jpg);
background-size:cover;
background-position: center center;
 
Und wo ist da der Code-Schnipsel damit das Hintergrund-Bild auch "fixed" ist? ;) Probiert es doch bitte erstmal aus, bevor ihr es postet:
  1. fixed Background-Image
  2. in einem Div zentriert
  3. Breite: 100% (oder anders ausgedrückt: cover)
 
Hustensaft schrieb:
Und wo ist da der Code-Schnipsel damit das Hintergrund-Bild auch "fixed" ist? ;) Probiert es doch bitte erstmal aus, bevor ihr es postet:
  1. fixed Background-Image
  2. in einem Div zentriert
  3. Breite: 100% (oder anders ausgedrückt: cover)
Zum Vergrößern anklicken....

Ach du Dummkopf, ich muss nichts ausprobieren - im Gegensatz zu dir verstehe ich etwas von meinem Beruf. Ein bisschen Eigeninitiative würde dir nicht schaden.
Nun gut, hilft dir eben niemand. Mich solls nicht stören :)
 
Werbung:
Das wollte ich damit nicht sagen! Nur der Code-Schnipsel führt leider nicht zu dem richtigen Ergebnis! Wenn du das beruflich machst und dir so sicher bist in deiner Arbeit, sollte es ja wohl kein Problem für dich sein, dieses Problemchen hier zu lösen. ;)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben