Header-Bild wird nicht skalieren/auf volle Breite zu strecken, wenn es als Hintergrund

Ich bin mir sicher, dass dies irgendwo beantwortet wurde, aber ich kann nicht scheinen, es zu finden.Header-Bild wird nicht skalieren/auf volle Breite zu strecken, wenn es als Hintergrund

Ich versuche, den Parallax-Effekt auf eine Kopfzeile zu bekommen, aber die Kopfzeile muss ein wenig strecken, um die volle Breite zu erreichen. Was ich will, ist der folgende Code, aber ich brauche das Bild als Hintergrund festgelegt werden:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <link rel="stylesheet" type="text/css" href="normalize.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <header> 
     <img width="100%" height="600px" src="https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1"> 
    </header> 

    <script src="jquery-2.2.1.js"></script> 
    <script src="scripts.js"></script> 
    </body> 
</html>

Ich habe versucht, mit Hintergrund-size: Cover, Hintergrund-size: enthalten, und einige andere Optionen zu machen Dehnung auf die volle Breite als Hintergrundbild, aber die einzige Möglichkeit, dies zu tun, ist das manuelle Einstellen von Pixeln für die Hintergrundgröße, die nicht dynamisch ist.

Hier ist ein codepen von dem, was ich versuche, das Bild Blick zu haben wie: http://codepen.io/anon/pen/yOpLGW (um es in voller Breite

Hier gestreckt Bekanntmachung der ist mein Versuch, es als Hintergrund mit CSS arbeiten zu lassen:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>title</title> 
    <link rel="stylesheet" type="text/css" href="normalize.css"> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
    <header id="parallaxImage"> 
    </header> 

    <div style="height: 2000px; text-align: center;">Just parallaxing</div> 

    <script src="jquery-2.2.1.js"></script> 
    <script src="scripts.js"></script> 
    </body> 
</html>

noch

style.css

#parallaxImage { 
    background-image: url('https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1'); 
    background-color: #d3d3d3; 
    /*background-width: 100%; 
    min-width: 100%; */ 
    background-size: 1300px 600px; /* I've tried cover and contain */ 
    position: relative; 
    height: 600px; 
    background-position: top center; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    margin-top: 0; 
    padding: 0; 
}

http://codepen.io/anon/pen/YqYzBQ (weder Abdeckung enthalten Arbeit Hintergrund-size:. 1300px 600px ziemlich nah dran ist, aber nicht accoun t für verschiedene Bildschirmgrößen.)

Es sieht nicht richtig in CodePen, aber es sieht in einem vollständigen Browser gut aus.

Quelle

2016-04-06 John Curry

Try this:

<style> 
#parallaxImage { 
    ... 
    background-size: 100% auto; 
} 
</style>

Demo

Quelle

2016-04-06 21:17:21 isherwood

Diese Arbeit sollte

#parallaxImage { 
    background-size: 100% 600px; 
    ... 
}

Quelle

2016-04-06 21:21:14 smrubin

eine Marge 0 auf den Körper hinzufügen von dem zusätzlichen Platz auf der Oberseite und an den Seiten zu entfernen.

können Sie die Größe von #parallaxImage auf die Größe des Bildes mit padding-top erzwingen. Sehen Sie sich die Kommentare im CSS an, um zu sehen, wie Sie berechnen können, was der Füll-Top sein soll.

so wird Ihr Bild reaktionsschnell und niemals überproportional gestreckt.

ich hoffe, das ist, was Sie verlangen.

body { 
 
    margin:0; 
 
} 
 

 
#parallaxImage { 
 
    /* 
 
    width of image/height of image * width 
 
    668px/1001px * 50 = 33.3666333666 
 
    (change the 50 in this formula to whatever you want.) 
 
    */ 
 
    padding-top: 33.3666333666%; 
 
    background-image: url('https://nebula.wsimg.com/d392c606f7dba3537a83d91d90f4c7a2?AccessKeyId=BF7FD28E4BC0A4D7650A&disposition=0&alloworigin=1'); 
 
    background-color: #d3d3d3; 
 
    background-size: contain; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 

 
}

<header id="parallaxImage"></header> 
 

 
<p>Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla Bla bla bla bla bla </p>

Quelle

2016-04-06 21:27:20 NewsletterPoll

Header-Bild wird nicht skalieren/auf volle Breite zu strecken, wenn es als Hintergrund

Antwort

Verwandte Themen