背景画像を画面サイズに合わせて表示するCSS
背景にした画像を画面サイズに合わせて表示させるCSSです。
Perfect Full Page Background Image
昨日まではこちらの「Perfect Full Page Background Image」の”CSS-Only Technique #2”の方法でこのブログの背景を画像表示させていました。個人的なサイトだしいいかなと思って、IEのことはほとんど考えずにコーディングしたので、IEでブラウザチェックなんてしてなかったんですが、昨日IEで見たら背景の表示がIE8以上でしかされてなく、チェックしたらオペラでも表示されてませんでした…
せめてIE7以上対応にしようと思い背景のCssも変えました。
同じサイトのCSS-Only Technique #1の方法ならIE7以上はいけるようなので、その方法に変更しました。
IE7以上で可能な背景を画面サイズにあわせて表示するコードです。
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
IE6以外では問題なく表示できました。
IE6は画像のみ最初に表示されてその後にコンテンツがきてしまいました。
このブログの背景部分のhtmlとCssです。
<body>
<div id="bg">
<img src="<?php bloginfo('template_url'); ?>/images/bgimage.jpg" alt="" />
</div>
<div id="container">
：
#bg img {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
#bg img{
left: 50%;
margin-left: -512px; }
}
No Comments & Tracbacks