すべてのデバイスで複雑な背景イメージの位置付け

Question

まずはlocalhostで開発中のURLの詳細を提供できません。しかし、うまくいけば、下の私の明確な説明で、あなたは提案を提供することができるかもしれません。 :-)

私はWordpressサイトの.header-wrap #headerにUpliftテーマを使用して画像を配置しようとしていました。下のコードは正しく機能していますが、画像はアスペクト比のためヘッダーの下に表示されます。これは高さが明らかに160ピクセルを超えていることを意味します。私もbackground sizingとbackground-positionを試しました - どれも正しい結果をもたらしません。 私はメディアクエリーを導入する必要があることを知っていますが、まず最初に大きな画面でこの湾曲した画像を扱う必要があります。

ヘッダーロゴの下に直接座ってサイトヘッダーテンプレートに配置する必要があるため、すべてのデバイスでスケーラビリティが得られますが、本体が画像の下をスクロールするように固定ヘッダーが採用されています。

私は2つのスクリーンショットを提供しました。最初のスクリーンショットは、現在ヘッダー領域の下にある以下のコードを使用し、もう1つのスクリーンショットはすべての画面でどのように表示されるべきかを示します。

イメージが特定のシェイプにカスタマイズされていない場合、以下のコードが機能します。

画像を固定しておく必要があります。ユーザーが上下にスクロールすると、ページの内容が画像の下にスクロールします。

.header-wrap #header { 
background-image: url(http://localhost/lps/wp- 
content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ; 
background-color: #fff; 
background-repeat: no-repeat; 
background-size: cover; /*this does not produce the outcome required*/ 
background-position: 0 100px; 
-webkit-background-size: 100% 100%; /* Safari */ 
-khtml-background-size: 100% 100%; /* Konqueror */ 
-moz-background-size: 100% 100%; /* Firefox */ 

}

preferred layout

The image as it currently stands using code insert

Answer 1

こんにちはあなたは、画像の背景を使用すると、異なるサイズを生成する必要があることも応答するためにメディアクエリを必要とする...

.header-wrap #header { 
min-width:100%; 
min-height:100%; 
height:100%; 
width:100%; 
position:fixed; 
top:0px; 
background-image: url(http://localhost/lps/wp-content/uploads/2017/08/LiquidS_FLD_cover0817-45-1-1.png) ; 
background-color: #fff; 
background-repeat: no-repeat; 
background-size: cover; /*this does not produce the outcome required*/ 
background-position: 0 100px; 
-webkit-background-size: 100% 100%; /* Safari */ 
-khtml-background-size: 100% 100%; /* Konqueror */ 
-moz-background-size: 100% 100%; /* Firefox */ 

@media all and (max-width: 1080px) { 
    .header-wrap #header{ left:-600px;} 
} 

@media all and (max-width: 980px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 800px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 768px) { 
    .header-wrap #header{ left:-300px;} 
} 

@media all and (max-width: 750px) { 
    .header-wrap #header{ left:-380px;} 
} 

@media all and (max-width: 640px) { 
    .header-wrap #header{ left:-280px;} 
} 

@media all and (max-width: 360px) { 
    .header-wrap #header{ left:-180px;} 
} 

@media all and (max-width: 320px) { 
    .header-wrap #header{ left:-160px;} 
} 

今すぐメディアクエアーを調整する必要がありますここでは例のために位置づけていますが、ここではさまざまなデバイスに多くのものを適応させる必要があります。