[CSS]背景画像を中央から相対指定する方法
こんにちは、ピーターです。
最近はCSSをよく書いています。
例えば、1280pxの幅のページに、500pxの画像を横に3つ並べたいとします。
その時、「text-align: center;」したように中央に寄せる必要があるとします。
こんなイメージです。
これを実現するのは簡単です。
HTML:
<div id="images"><!--
--><img src="left.png" /><!--
--><img src="center.png" /><!--
--><img src="right.png" /><!--
--></div>
CSS:
#images {
width: 1500px;
position: relative;
left: 50%;
margin-left: -750px;
}
これだけです。
まず、画像を3つ並べます。
img間の<!– –>は、img間の隙間をなくすためのものです。
これだけでは中央に寄りませんので、1500pxのdivの左端を中央に合わせ、幅の半分をネガティブマージンとすることで中央に寄せています。
しかしこの場合、1500pxに対してページ幅が1280pxなので、横スクロールバーが出てしまいます。横スクロールバーが出てもいい場合もあると思いますが、出したくない場合もあると思います。横スクロールバーを出さないようにするにはどうすればいいでしょうか。
CSSのbackgroundプロパティを使ってみたらどうでしょうか。
HTML:
<div id="images"></div>
CSS:
#images {
width: 1500px;
height: 500px;
position: relative;
left: 50%;
margin-left: -750px;
background:
url(left.png) no-repeat left top,
url(center.png) no-repeat center top,
url(right.png) no-repeat right top;
}
これも横スクロールバーが出てしまいます。
横スクロールバーが出る原因は、ページ幅を超えるwidth指定です。
なのでまずは「width: 1500px;」を外します。
中央に寄せたdivでなくても、背景画像を中央に表示するのは簡単です。
HTML:
<div id="images"></div>
CSS:
#images {
height: 500px;
background: url(center.png) no-repeat center top;
}
これで1枚の画像を中央に表示することができます。
では、左右の画像はどうしたらいいでしょうか。
background-positionプロパティは、位置を相対指定できます。
background: url(left.png) no-repeat left 5px top 10px;
これで、左から5px、上から10pxとなります。
これを使って、中央からの位置を指定すれば良さそうです。
background: url(left.png) no-repeat center -500px top;
残念ながら、left, right, top, bottomからの位置は指定できるのですが、centerからの位置は指定できません。
そこでcalc関数を使ってみます。
HTML:
<div id="images"></div>
CSS:
#images {
height: 500px;
background:
url(left.png) no-repeat calc(50% - 500px) top,
url(center.png) no-repeat center top,
url(right.png) no-repeat calc(50% + 500px) top;
}
たしかにこれはうまくいきます。横スクロールバーも出ません。
しかしIEだけは、background-positionプロパティにcalc関数を使うとうまくいかないという問題があります。
別の方法を考えてみます。
width: 50%; のインラインブロックを2つ横に並べることで、左のインラインブロックの右端と、右のインラインブロックの左端が中央の位置になります。このことを利用して、インラインブロックの右端または左端からの位置を指定した背景画像とすれば良さそうです。
HTML:
<div id="images"><!--
--><div class="left"></div><!--
--><div class="right"></div><!--
--></div>
CSS:
#images {
height: 500px;
background: url(center.png) no-repeat center top;
}
#images > div {
display: inline-block;
width: 50%;
height: 100%;
}
#images .left {
background: url(left.png) no-repeat right 250px top;
}
#images .right {
background: url(right.png) no-repeat left 250px top;
}
これでうまくいきました。IEでも問題ありません。
真ん中の画像は外側のdivの中央に表示しています。
左の画像は右から250px、右の画像は左から250pxの位置とすることで、中央からの位置指定を行っています。
最後のソースの全ソースと画像はこちらです。
<!DOCTYPE html>
<html>
<head lang="ja">
<meta charset="UTF-8">
<title>[CSS]背景画像を中央から相対指定する方法</title>
<style>
body { margin: 0; }
#images {
height: 500px;
background: url(center.png) no-repeat center top;
}
#images > div {
display: inline-block;
width: 50%;
height: 100%;
}
#images .left {
background: url(left.png) no-repeat right 250px top;
}
#images .right {
background: url(right.png) no-repeat left 250px top;
}
</style>
</head>
<body>
<div id="images"><!--
--><div class="left"></div><!--
--><div class="right"></div><!--
--></div>
</body>
</html>
最近のコメント