HTMLとCSS - バナーとバックグラウンドの配置

-1

私は、訪問者がバナー、その下の背景イメージ、お互いの下に垂直に位置するいくつかのボタンを見る簡単なランディングページを構築しています。HTMLとCSS - バナーとバックグラウンドの配置

現時点では、バナーと背景画像の両方が同じ位置（Webページの左上隅）から始まっているため、背景の一部がバナーによって隠されています。

私は現在持っているコードは次のとおりです。

<style> 
    body { 
    background: url("http://url.to/background") no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    padding: 0px; 
    margin: 0px; 
    } 

    #Wrap { 
    position: absolute; 
    } 
</style> 

<body> 
    <div id="Wrap"> 
    <img src="http://url.to/banner" /> 
    </div> 
</body>

期待される結果を表示するために余分なスクロールを引き起こすことなく、画面にフィットしながら、バナー画像は、ページの始まりを取ることです。もっと重要なことは、バナーの後にバックグラウンドをスタートさせることです。

フィドルは、次のURLで見ることができます。

https://jsfiddle.net/morL1zka/

すべてのヘルプやアイデアをいただければ幸いです。

出典

2017-06-08 metaarch

あなたはこれに対して1つのフィドルを作成できますか？ – fruitjs

@fruitjsおそらくあなたはスクリーンショットを意味するでしょうか？私には無知を許してください。 – metaarch

[jsfiddle]（https://jsfiddle.net/）を見てください。果物が何を求めているのか分かります。） –

JavaScriptを使用してeasyliを解決できます。背景位置は、高さを知らずにバナーの下に自動的に設定されます。ここで

var body = document.getElementById('body-margin'); 
 
var banner = document.getElementById('banner'); 
 

 
body.style.backgroundPositionY = banner.offsetHeight + 'px';

body { 
 
    background: url("http://simonakoleva.me/wp-content/themes/hitchcock/images/bg.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
#Wrap { 
 
    background-color: #345370; 
 
    text-align:center; 
 
}

<body id="body-margin"> 
 
    <div id="Wrap"> 
 
    <img id="banner" src="http://simonakoleva.me/wp-content/uploads/2017/05/mybanner.jpg" /> 
 
    </div> 
 
</body>

もあなたの更新フィドルです：https://jsfiddle.net/morL1zka/2/

出典

2017-06-08 11:20:25

私は

を追加しようとしましたが、これはバナーの余白を台無しにしているように見えます、ページの先頭より下のピクセルです。 – metaarch

@metaarch私の編集した答えを確認してください。私はあなたのために他の解決策を持っています。 iveは#wrapに背景色を追加して、各ウィンドウサイズで見た目をよくしました。 –

あなたはこのためbackground-position-yを使用する必要があり、そしてあなたがの高さに等しい値を設定する必要がありますバナー

body { 
 
    background: url("https://www.w3schools.com/css/img_fjords.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    background-position-y: 100px;/*the value must be the same height as the banner */ 
 
    
 
} 
 

 
#Wrap { 
 

 
    position: absolute; 
 
}

<div id="Wrap"> 
 
    <img src="http://url.to/banner" /> 
 
</div>

出典

2017-06-08 11:22:28 Chiller

HTMLとCSS - バナーとバックグラウンドの配置

答えて

関連する問題