2008.05.26

背景画像をリサイズ（拡大・縮小）させる方法

リサイズできる背景画像のサンプル

タイトルだけ見ると、おーっと驚くようなテクニックですけど、実際はbackground-imgではなくimgタグを使ってるんですよね。なかなかこのテクニックを使う機会は無いと思うので、こんなテクニックもあるんだぁーっ、へぇーって思って頂けるぐらいで、十分です。では、やり方を。

HTMLを記述

 
<img src="bg_dimension.jpg" alt="" id="bg-img" />
<p id="text">imgタグにpositionを利用して背景画像を敷いている様に見せています。幅100%を指定することで画像も拡大・縮小します。</p>

CSSを記述

 
body {
    overflow: hidden;
}
 
#bg-img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
 
#text {
    background: url(images/tips/bg_dimension_transp.png) !important;
    position: absolute;
    padding: 10px 0;
    width: 100%;
    top: 10%;
    left: 0px;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 1.3em;
}