divの視差背景画像を作成するには

ページの上部に視差画像が割り当てられたdivがあります。ビューポートがそれほど広くない場合は画像が反応しません。どうすればいいですか？背景画像は応答しますか？divの視差背景画像を作成するには

#parallax{ 
 
    height:100vh; 
 
    background:url("../images/keyboard.jpg"); 
 
    background-size: cover; 
 
    background-attachment: fixed; 
 
}

<div id="parallax"> 
 
    <div class="col-md-1"></div> 
 
    <div id="profile" class="bottom-align col-md-4"> 
 

 
    </div> 
 
</div>

と、ここで私が応答しなく

によって何を意味するかのスクリーンショットは、基本的に私は、ビューポートがないときに表示するには、「ウェブサイト」したいされています「WE」の代わりにワイドも同様

出典

2016-12-08 Ayman H

幅 'てみてください：/ – odedta

私がしました実際の画像タグに。これのための実例を見てうれしいです。 –

：uは#parallaxDivに意味ならば、それは仕事をdidntの、100％' – odedta

画像の幅を100％にします。 divの中に画像タグを入れて、画面サイズを表します。

<div style="width:20%"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:40%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:60%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:80%">  
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div> 
 
<div style="width:100%"> 
 
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/86/Triforce.svg/691px-Triforce.svg.png" style="width:100%"> 
 
</div>

出典

2016-12-08 16:23:48

background-size: coverモバイルデバイス上で画像をクロッピング、背の高い狭い含む要素の全体高さを埋めるために背景画像をスケーリングされます。

coverの代わりにbackground-size: containを使用するか、含まれている要素を100vh未満に縮小する必要があります。前者の注意点は、コンテナの残りの部分をどのように埋めるかを理解する必要があることです。ここで

は例です：

.target { 
 
    background: url(http://placekitten.com/300/100); 
 
    background-position: center center; 
 
    background-color: teal; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    height: 150px; 
 
    width: 100px; 
 
} 
 
.better { 
 
    background: url(http://placekitten.com/300/100); 
 
    background-position: top center; 
 
    background-color: teal; 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    height: 150px; 
 
    width: 100px; 
 
}

<html> 
 

 
<body> 
 
    Cover: 
 
    <br> 
 
    <div class="target"></div> 
 

 
    Contain: 
 
    <br> 
 
    <div class="better"></div> 
 

 
    <div> 
 
    Original: 
 
    <br> 
 
    <img src="http://placekitten.com/300/100" ?> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2016-12-08 16:29:19 Bojangles

簡単な解決策は次のようになります。

全体のビューポートに

body{ width:100%; height:100%; /* on the example due to some overflow I've used 97% to prevent scroll barsをあなたの体の大きさのストレッチを行います

....
のホワイトスペースを生きるために、あなたの背景画像はbody要素

background-image:url(...); background-position:cover;

を記入し、それはそれだ

を作りますヘッダーは、画像の位置をヘッダーの幅だけオフセットします。

background-position:50px;

不便はあなたが他のページに同じスタイルシートに依存することはできません実際のコンテンツを持っているしたい場合、あなたはそれを変更する必要があります。

スニペットの幅が固定されているため、この例では反応はありません。しかし、それはテストされたときに期待通りに動作します。（少なくともあなたがイメージがthe original one hereに比べて伸びているかを確認することができます）

.header{ 
 
\t border:solid ; 
 
\t width:100%; 
 
\t height:50px; 
 
    text-align:center; 
 
} 
 

 
body{ 
 
    width:97%; 
 
    height:97%; 
 

 
    background-repeat:no-repeat; 
 
    background-image:url(https://i.stack.imgur.com/AWVa6.jpg); 
 
    background-position:0 50px; 
 
    background-attachment:fixed; 
 
    background-size:cover; 
 
}

<div class="header">your header or navigation bar</div>

出典

2017-11-29 00:08:00 user10089632

divの視差背景画像を作成するには

答えて

関連する問題