HOME > > > レスポンシブWebデザインでも使える、1枚の画像でborderを使って4つ角にピッタリの背景に枠をつける方法

レスポンシブWebデザインでも使える、1枚の画像でborderを使って4つ角にピッタリの背景に枠をつける方法

4つ角にピッタリの背景に枠をつける方法

1つの背景画像でレスポンシブWebデザインの背景に枠をぴったり合わせる

レスポンシブWebデザインを使用した際、背景を各端末にピッタリ合わせる為に各端末サイズの背景を用意する事があります。
ですがborderを使う事で1枚の画像で各端末の背景をピッタリ合わせる事が出来たら更新なんかも間違いなく安心して出来ますね。
では枠を使った背景画像を各端末毎にピッタリ合わせちゃいましょう。

設置する背景画像を用意します。

まずは設置する背景画像を用意します。
各角に枠がつくようなデザインにしてみました。 Retinaディスプレイの事を考えて、画像サイズは倍にして作ってあります。

背景画像

画像を分割すると以下のような感じです。

背景画像分割

cssを使ってbodyに画像を設置します

作った画像をcssを使って読み込み・設置しましょう。


body{
	margin:0;
	padding: 0;
	border-style: solid;
	border-width: 105px;
	border-image: url(画像のパス) 210 round;
	min-height: 105px;
	min-width: 105px;
}

「105px」というのは本来設置したかったサイズです。
Retinaディスプレイ用に画像サイズを倍(210px)にしているのでcssで本来のサイズを設置します。
border-imageの「round」は「繰り返して、画像が半端な位置で切れないで拡張してね」という指定をborderに入れています。
そうする事でブラウザサイズを変更しても、背景が綺麗に表示される様になります。

PCの表示例

PCで見た時はこんな感じになります。

背景ぴったりPC

スマフォの表示例

スマフォで見た時はこんな感じになります。

背景ぴったりスマフォ

数値を変えたり画像サイズを変更する事で、色々な枠デザインが1枚の画像で使えます。
背景なのでレスポンシブの場合はPCだけ、タブレットだけ、スマフォだけという使い方も出来ます。

このページを共有する

Facebook
twitter
Line
googleプラス
はてなブックマーク
Pocket