レスポンシブ的な背景画像【background-image】

レスポンシブデザインが主流になっていますが、ブラウザの幅に応じて背景画像の比率を一定に保ったまま拡大縮小するやつの紹介です。

○index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/common.css">
    <title>デモ</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <!--header-->
    <header></header>
    <main ontouchstart="">
      <div class="Container">
        <div class="sideMargin">
          <div class="beforeContents">
            <div class="beforeImg"></div>
          </div>
          <div class="afterContents">
            <div class="afterImg"></div>
          </div>
        </div>
      </div>
    </main>
    <!--footer-->
    <footer>
      <script src="js/jquery-2.0.0.min.js"></script>
      <script src="js/common.js"></script>
    </footer>
  </body>
</html>

・背景画像を適用する要素であるbeforeImgとafterImgをそれぞれbeforeContentsとafterContentsで覆う。

○index.css

.Container {
  padding: 50px 0;
  background-color: #9e9e9e40; }

.sideMargin {
  padding: 0 10px; }

.beforeContents {
  width: 100%;
  height: 500px;
  max-width: 960px;
  margin: 0 auto 50px; }

.beforeImg {
  background-image: url("../images/test.jpg");
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%; }

.afterContents {
  width: 100%;
  max-width: 960px;
  margin: 0 auto; }

.afterImg {
  background-image: url("../images/test.jpg");
  background-repeat: no-repeat;
  background-position: center;
  padding-bottom: 50%;
  width: 100%; }

①beforeの塊

・背景画像の高さを500pxに固定

・サイズにはcoverを使用

→普通に使うやつ

②afterの塊

・背景画像の高さはpaddingで確保する

パーセントの値を弄ることで、縦横比を変更できます。

今回のものは、横100%に対して高さは50%の大きさです。

→ブラウザの幅に応じて、比率を一定に保って背景画像が拡大縮小する。

レスポンシブデザインを扱っていると、結構使える表現です。

簡単なので、ガンガン使っていきましょう。

今回は以上です。