背景画像を画面サイズに合わせて表示するCSS

背景にした画像を画面サイズに合わせて表示させるCSSです。

Perfect Full Page Background Image
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; }
}

Related Article

1 Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル 素材 コンテンツ Facebook php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ