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

Hintergrundbild an Seite anpassen

S

Schimun

Neues Mitglied
Hallo!

Ich will, dass mein Hintergrundbild immer den ganzen Bildschirm ausfüllt und dabei nicht wiederholt wird. Dabei sollte man immer (egal wie graß das Fenster ist) das komplette Bild sehen. Es darf als verzogen werden. Auserdem soll es beim scrollen nicht mit gehen.

Bis da hin bin ich gekommen und jetzt hab ich keinen Plan mehr ;)

Das habe ich im HTML-Teil:
<body class="body" background="Bilder/Hintergrund.jpg" >
</body>

Und das habe ich schon im CSS-Sheet:
.body{
width: 100%;
height: 100%;
background-repeat: no-repeat;
}

obwohl 100% drin steht, bleibt rechts ein weißer Streifen und unten wird ein Streifen abgeschnitten.

MfG, Schimun :D
 
Habe noch was gefunden. Nämlich background-size:100% auto; jetzt passt das Bild wenigstens in der x-Richtung. In der y-Richtung ist immernoch was abgeschnitten.
Und ist background-attachment:scroll richtig, wenn das Bild während dem scrollen stehen bleiben soll?

Danke für eure Antworten

MfG, Schimun
 
Zuletzt bearbeitet:
Mit CSS3 geht das ganz leicht:
html {
background: url(bild.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
Danke für die Antworten!

@Nita: Damit klappts echt gut. Das Bild geht mit dem scrollen nicht mit usw.

Eigentlich bin ich auch so schon damit zufrieden aber einen Hagen hat es nocht:
Bei den Browserfenstern, die so schmal sind, dass das Bild nicht mehr ganz nach unten ans Fenster-Ende reicht (weil das Bild klein-skaliert wird wenn das Fenster enger wird) entsteht unten noch weißer Streifen.

Also wenn man den Streifen noch weg bekäme wärs perfekt, aber sost füge ich einfach noch ein "minimal-width" eil, dass das nicht mehr passiert.
 
EDIT:

Okay, ich habs den Rest noch hinbekommen. Es ist so ne Mischung aus euren Antworten :D

Ich schreibs mal rein für die, dies interessiert:

.body{
background-size:100% auto;
background-image: url(bilder/hintergrund.jpg);
background-attachment: fixed;
background-size: cover;
}

danke an alle, sich einen Augenblick Zeit genommen haben und geantwortet haben,
MfG, Schimun
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben