ceblog.mediba.jp

気になるパーツ

左ナビ
・いかにもデザイナーズテイストな画像

構成
・wrapper … div要素 ← 黒背景
・inner … div要素 ← ボケがキツイ画像を背景指定。その際「opacity: .5;」で透明度を50%に指定。wrapperである黒背景が効いてくる

▼html

<div class="banner_inner">

  <section class="search widget">

    <form action="/search" method="get"><input type="text" placeholder="Search..." name="q" value="">

      //中略

    </form>

  </section>

  <div class="banner_wrap">

    //中略

  </div>

  <div class="cover_image"></div>

</div>

▼css

#banner {

    height: 100%;

    overflow-y: auto;

    overflow-x: hidden;

    background-color: #000;

    position: relative;

}

.cover_image {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background-image: url(http://static.tumblr.com/ac0291a…/bcwoqdv/N0Snsyksb/tumblr_static_bbamyqlutqo8wkgockcc088oc_2048_v2.jpg);

    opacity: .5;

    background-size: cover;

    background-repeat: no-repeat;

    background-position: 50% center;

    padding-right: 1px;

    width: 100%;

    z-index: -1;

}

その他

＜menu＞