0

Dream Weaver CS5のカスケードスタイルシートを使用して、Webページに背景を追加しようとしています。私は幸運にもこのコードを見つけることができました：

html, body {height: 100%; width: 100%; padding: 0; margin: 0;}

#full-screen-background-image {z-index: -999; min-height: 100%; min-width: 1024px; width: 100%; height: auto; position: fixed; top: 0; left: 0;}

#wrapper {position: relative; width: 800px; min-height: 400px; margin: 100px auto; color: #333;}

これはスタイルシートに追加され、このビットは次のとおりです。

<body>
  <img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Content goes here...</p>
  </div>
</body>

これはHTMLに追加されます。

ただし、画像やテキストなど、ページに別の要素を追加しようとすると、スタイルシートのコードで背景がまったく設定されていないかのように、設定した背景のすぐ下に画像が表示されます。

誰かが私が間違っている可能性があることを教えてもらえますか？

4

1 に答える 1

1

position:fixed;ページの流れから画像を引っ張ってくるので、実際にはうまくいっていると思います。あなたの犯人は実際には のmargin: 100px auto;ルールだと思います#wrapper。

私はあなたのCSSで少し遊んで、それをきれいにしました。これは望ましい結果ですか？

jsFiddle を参照してください

html, 
body {
    height: 100%; 
    width: 100%; 
    padding: 0; 
    margin: 0;
}

#full-screen-background-image {
    z-index: -999; 
    position: fixed; 
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#F00;
}

#wrapper {
    position: relative; 
    width: 800px; 
    /*margin: 100px auto; */
    color: #333;
}

または、バックグラウンドのスケーリング/ストレッチが必要ない場合は、これを使用できます。

body {
    background-image: url(/background.jpg);
}
于 2013-03-06T10:05:25.753 に答える