coverプロパティを使用して、背景を塗りつぶし、ブラウザでサイズを変更する背景画像を作成しています。しかし、1つの問題が発生しました。ページに多くのコンテンツがあり、下にスクロールするためのスクロールバーが表示されません。これが私が使用しているコードです:
body{
background: url(path.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
/* Cover for IE 7/8 */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path.jpg', sizingMethod='scale');
/* End Cover for IE 7/8 */
background-size: cover;
background-color: transparent !important;
position:fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
max-width:2500px;
max-height:1500px;
z-index:1;
}
削除するposition:fixed;
とスクロールバーは元に戻りますが、背景画像が消えます。これに取り組み、スクロールバーと背景カバー画像の両方を使用するための最良の方法は何ですか?
注:私はjQueryを使用しており、それが機能する場合はJSの回答を使用します(ただし、CSSのみの回答が好きです)。
アップデート
私はから削除fixed
しました:
背景:url(path.jpg)繰り返しなしの中央の中心が修正されました。
スクロールバーが再び表示されますが、スクロールすると、スクロールすると画像が黒い背景で覆われます。画像を固定してスクロールバーを表示したいです。