1

私がこれをするとき：

body{
    background-image:url('pix/image.png');
    background-repeat:repeat-y;
}

image.pngを正しく垂直方向に繰り返します

私の問題は、繰り返し始める前に、背景のいくつかのピクセルを表示したいということです。

私はこれを試しました：

body:before{
  content: "";
  height: 400px;
  display: block;
  background: #f9fae8;
}

しかし、問題は、それがすべてのコンテンツを下に移動することです。これは私が必要としているものではありません。

明確にするために、これは私が必要とするものの図です（ペイントで作られています！）：

ここに画像の説明を入力してください

注：別の解決策は、すべてのコンテンツをコンテナーdiv内に配置し、このdivに背景画像を指定して、xピクセルのマージントップを指定することです。問題は、コンテンツを生成するプラットフォームがあまり変更されないことです。したがって、追加のdivを追加せずに本文を変更できると便利です。

4

1 に答える 1

3

position:absolute;あなたに与える:before。このように書いてください：

body:before{
  content: "";
  height: 400px;
  display: block;
  background: #f9fae8;
  position:absolute;
  left:0;
  right:0;
  top:0;
  z-index:-1;
}

これもCSSで確認できます：繰り返しのある背景位置？

于 2012-05-09T04:28:15.223 に答える