0

だから多分それは私がhtmlで中央に配置されたテーブルとしてそれを表示しているので私が私の体を中央に配置している方法です。

html {
    display: table;
    margin: auto;
}

body {
    width:100%;
    display: table-cell;
    vertical-align: middle;
}

#background{
    width:100%;
    height:100%;
    position:fixed;
    background-image:url('image.jpg'); 
    background-repeat: no-repeat;
    background-size:cover;
}

そのコードに基づいて、画像は本体の先頭から始まり、中央から始まるので、画像はそこから始まり、そこにあるべきではない空白があります。本文のコンテンツを中央に配置したいのですが、画面に正しく収まるように背景を中央に配置しないでください。センターコードをコンテナに転送しようとしましたが、うまくいきませんでした。私は1、2時間見回しましたが、すべての答えがうまくいきませんでした。これを修正する方法について何か考えはありますか？

4

2 に答える 2

1

ページの余白をリセットしましたか?

html {
  margin: 0;
  padding: 0;
 }

body {
  margin: 0;
  padding: 0;
 }

また、目的の結果が全画面の背景を持つことである場合は、次のようにしてください。

body {
  background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
background-size: cover;
}

別の方法については、このリンクを確認してください: http://css-tricks.com/perfect-full-page-background-image/

于 2013-03-08T18:52:46.600 に答える
0

体を中央に置かないでください。それをコンテナに包むことができますか。代わりに「mainContainer」と中央に配置しますか?

編集：これはあなたのものからフォークされたフィドルですhttp://jsfiddle.net/amyamy86/C4Spd/

<html>
    <body>
       <div id="background"></div>
       <div id="outerContainer">
           <div id="mainContainer">
               <div id="box">
                   <p>This is some content</p>
               </div>
           </div>
       </div>
    </body>
</html>

#outerContainer {
    display: table;
    margin: auto;
}
#mainContainer{
    width:100%;
    display: table-cell;
    vertical-align: middle;
}
#background {
    width:100%;
    height:100%;
    background-image:url('http://mytwopiasters.files.wordpress.com/2011/01/ocean.jpg');
    position:absolute;
    background-repeat: no-repeat;
    background-size:cover;
}
#box {
    text-align:center;
    width:100px;
    position:fixed;
    height:100px;
    background:#fff;
    border:1px #000 solid;
}
于 2013-03-08T18:24:12.043 に答える