問題タブ [background-repeat]

CSSで私はそのコードを作りました:

しかし、コンテンツからヘッダーを分離するために、それらの間に「バー」が必要です。

だから私は作った：

しかし、バーは「無制限」にはならず、「1920px」に達するまで繰り返すだけです。どうにかしてそれを変更できますか? 置く

うまくいきませんでした

背景画像を挿入したり、ヘッダーとフッター セクションの背景をグラデーションにしたりするのに問題があります。背景画像を繰り返さなければなりません。.gif 画像は css と同じフォルダーにある必要がありますか? そのためのcssです。

また、白からオレンジ、黒への線形グラデーションにも取り組んでいます。このグラデーションは、ヘッダー セクションとフッター セクションの背景になります。ヘッダーとフッターのセクションを分割して、線形グラデーションの背景を提供することはできますが、ヘッダーとフッターの境界までは拡張されません。これは、ヘッダーの html セクションです。

私が持っているhtmlをフォーマットするcss

Google Chrome で、背景の繰り返しプロパティを持つ画像の周りに、細かい白い境界線 (実際の境界線ではありません) が突然表示されます。Chrome の更新が原因である必要がありますが、削除できないようです。

Retina Mac でバージョン 55.0.2883.95 を実行しています。Firefox、Safari、および Chrome Mobile はすべて正常に動作します。このサイトで私が何を意味するかを見ることができます。

更新: どうやら私の Retina 画面の hdpi ピクセル密度が原因であるため、これは Chrome 開発チームの問題のようです。

div以下をmainの a に入れるとbody、これは機能します:

しかし、私がCSSを使用するときは機能しません:

背景ごとに異なる写真が必要なため、うまくいかないようです。これにより、background-repeatなどが無視されます。(注: また、異なる div は異なる表示値 (ブロックまたはなし) を持つため、それらも別々に記述する必要がありますが、それは問題ではありません。)

理由と回避策があるかどうかは誰でも知っています。

divの背景画像として繰り返しパターンを使用しています:

test_pattern.png は幅 25 ピクセルなので、幅 200 ピクセルの div で 8 回繰り返されると予想されます。これはまさに私がSafariで得たものです。ただし、クロムはパターンを 8 回より少し多く繰り返します。さらに奇妙なことに、Chrome ページのスナップショットを撮ると、div の幅が 200 ピクセルではなく 220 ピクセルであることがわかりました。これをすべてのブラウザで一貫させる方法はありますか?