weblog

Web制作についての覚え書き
<< ロールオーバーについてのまとめ | main |
スポンサーサイト
0

    一定期間更新がないため広告を表示しています

    | - | | - | - |
    画面全体に背景画像を表示する
    0
      Webサイトの背景を画像で表示するデザインは個人的に結構好きです。その世界にトリップしたような気分になるので。
      しかし、このデザインを採用する上で問題となるのは見ている側の設定によって画面のサイズが変わることです。小さめな解像度の画面で見たら格好良く見えていても、大きなモニタで見たら画像が繰り返されたり小さく見え過ぎたりして見栄えが悪かったりします。最近では1920×1080が主流になってきているという話もあります。そこで、よく使われるであろう手法をメモしてみました。


      方法1. 大きめの画像を作り、単色になじませる

      body {
      background:url(full_image_back1.png) center top no-repeat #3B5DC6;
      }


      CSSで画像を中央配置して繰り返さないように設定、同時に背景色を設定し、もともとの画像もそのエッジが背景色になじむように作るというやり方です。それほど大きくない画面で見ている人はサンプル画面をCtrl(もしくはCommand)キーを押しながら−(マイナス)キーを連打するとどうなっているかわかると思います。ナイキのサイトはこのやり方ですね。


      方法2. 繰り返しても大丈夫な画像を作る

      body {
      background:url(full_image_back2.png) center top;
      }


      つまりパターンになるような画像を作る方法です。
      ちなみにPhotoshopで作る方法は、パターンにしたい画像のレイヤーを複製し、フィルタ>その他>スクロールでその画像の大きさの横幅の半分と縦幅の半分だけずらす、で作れます。こういう大きい画像の繰り返しでなくても、背景にパターンを使用しているサイトは多いです。


      方法3. 画面の大きさに合わせてCSSで拡大縮小するような画像を配置する

      * {
      margin:0;
      padding:0;
      }
      img#back {
      width: 100%;
      min-width: 1024px;
      height: auto;
      min-height: 100%;
      position: fixed !important;
      position:absolute;
      z-index:-1;
      top: 0;
      left: 0;
      }
      * html, * html body {
      height: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      }
      * html #cover {
      overflow: auto;
      position: relative;
      width: 100%;
      height: 100%;
      }

      <img id="back" src="full_image_back3.png" alt="back">
      <div id="cover">
          <div id="contents">
              <h1>Sample</h1>
              <p>Hello, World!</p>
          </div>
      </div>


      bodyに背景画像を設定するのではなく、画面大の画像を配置するやり方です。画面をリサイズするとそれに合わせて画像も拡大縮小します。繰り返したりなじませるのが無理な画像だとしたらこれがオススメです。
      參考にしたこちらの記事にはCSSだけではなくてさまざまなjQueryのプラグインも紹介されています。
      それから、こちらの記事からIE6でposition:fixedを実現する方法を使わせていただきました。詳しい説明はそちらのサイトで見るといいと思います。

      一応、z-index:-1を設定してIE6のみposition:absoluteにする(他のブラウザでは同じプロパティを同時に設定した場合、!importantと書かれている項目の方が優先されるが、IE6では無視され最後に書かれたものを適用することを利用したハック)ことでIE6の「コンテンツが画像に隠れる」という点はクリアできたように思いますが、IE6ではmin-widthが効かないので縦横比がおかしくなります。


      方法4. JavaScriptを使ってリサイズする

      * {
      margin:0;
      padding:0;
      }
      img#back {
      position: fixed !important;
      position:absolute;
      z-index:-1;
      top: 0;
      left: 0;
      }
      * html, * html body {
      height: 100%;
      overflow-y: hidden;
      overflow-x: auto;
      }
      * html #cover {
      overflow: auto;
      position: relative;
      width: 100%;
      height: 100%;
      }

      <script type="text/javascript">
      var width = 1024;
      var height = 768;
      var ratio=width/height;

      function imgResize(){
      var img = document.getElementById('back');
      var windowWidth = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth;
      var windowHeight = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
      var currentRatio=windowWidth/windowHeight;
      if(windowWidth>width&&currentRatio>ratio){
      img.width=windowWidth;
      img.height=windowWidth/ratio;
      }
      else if(windowHeight>height&&currentRatio<ratio){
      img.height=windowHeight;
      img.width=windowHeight*ratio;
      }
      }

      window.onresize = imgResize;
      window.onload = imgResize;

      </script>

      <body>
      <img id="back" src="full_image_back3.png" alt="back">
      <div id="cover">
          <div id="contents">
              <h1>Sample</h1>
              <p>Hello, World!</p>
          </div>
      </div>


      今度は画像の大きさをJavaScriptで変化させています。
      配置する画像のwidthとheightをそれぞれスクリプト部分のvar width = の右側と、var height = の右側の数字に記入すると使えます。コンテンツを増やしたりといったさまざまな状況で確認していないので問題があるかわかりませんが、よかったら使ってみてください。
      あと、JavaScriptがオフの環境を無視してしまっているので方法3のCSSも同時に使用したほうがいいかもしれません。

      一応、プラグインを使わないで設定する方法を紹介しました。
      參考にさせていただいた方々、ありがとうございました。
      | 背景画像 | 07:29 | comments(0) | trackbacks(0) |
      スポンサーサイト
      0
        | - | 07:29 | - | - |
        コメント
        コメントする









        この記事のトラックバックURL
        http://dxe.jugem.jp/trackback/6
        トラックバック
        ブログ内検索
        S M T W T F S
              1
        2345678
        9101112131415
        16171819202122
        23242526272829
        30      
        << September 2018 >>
        カテゴリー
        過去の記事
        プロフィール
        PR