• HOME
  • HTML/CSS
  • 背景画像をリサイズ(拡大・縮小)させる方法

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

管理人:sofu

タイトルだけ見ると、おーっと驚くようなテクニックですけど、実際は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;
}
 

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

background-imgは使っていません。imgタグにpositionを利用して背景画像を敷いている様に見せています。幅100%を指定することで画像も拡大・縮小するって感じです。

遊び心があるサイトには使えそうですね。

blog comments powered by Disqus

PageTop