2014-06-14 3 views
8

Ich habe einen Container mit einer festen Höhe von 850px. Ich möchte ein Hintergrundbild, das den gesamten Hintergrund auf allen Ebenen des Zooms abdeckt. Ich würde background-size: cover verwenden, aber ich brauche es ein bisschen größer als cover wird es machen. Ich möchte, dass ein Teil des Hintergrunds aus dem Container ausgeblutet wird und unsichtbar bleibt, um eine Parallaxe zu erzeugen.Wie setze ich Hintergrundgröße auf "cover", plus ein bisschen mehr in CSS?

Grundsätzlich, wie kann ich background-size: cover verwenden, und erhöhen Sie die Größe ein wenig darüber hinaus?

bearbeiten: Vergessen zu erwähnen, ich verwende auch background-attachment: fixed, also wenn ich mich nicht irre, wird es tatsächlich über die Größe des Browserfensters (?) Berechnet und nicht der 850px große Container. Wie würde ich in diesem Fall diese zusätzliche Blutung hinzufügen?

+0

Hast du es mit 'padding-top' versucht? – Vucko

+0

Ich würde einen Container in den Strom setzen und ihn etwas "größer" machen, dann den Hintergrund auf "Cover" legen und den anderen mit "overflow: hidden" ... zumindest würde ich dort anfangen . –

+0

@Vucko wie meinst du? –

Antwort

4

Einfach mit background-size: auto 110%; den Trick gemacht.

+6

Dies hat jedoch nicht die Funktionalität von 'cover'. Es muss in der Lage sein, zu "Hintergrundgröße 100% automatisch" zu wechseln, wenn die Breite des Hintergrunds kleiner als die des Browsers wird. –

+0

Wer weiß, sollte ich über die Implementierung des Javascript zu tun gehen? –

+0

Genau das, was ich gesucht habe! –

0

Ich legte das Container-Div auf: Höhe: 100vh, Überlauf: versteckt; dann dann die innere auf 110% (oder wie lange du willst in deiner Paralaxe), jetzt kannst du die Hintergrundeigenschaft ändern und Cover wird immer funktionieren

Verwandte Themen