HOME > 開発者向けBLOG > Webデザイン >  background-size

Technology Note 開発者向けBLOG

Webデザイン

background-size

こんにちは、ゼノフィ渡部です。

スマートフォンでの背景画像指定で高解像度のアイコンを表示する方法をご紹介いたします。

「background-size」プロパティを指定して、縦横2倍の画像を1/2に圧縮して表示させます。

4行目の「url(icon_circle.png) no-repeat 5px center」で、アイコンのプロパティをはじめに記述し、次のグラデーションのプロパティとの間に「,(コンマ)」で区切ります。5行目では「gradient」プロパティでグラデーションを設定しています。

7行目の「background-size」でアイコンと背景のサイズを指定しています。「26px 26px」でアイコンの縦横を決めています。この時、実際の画像のサイズは52px(縦)、52px(横)ですがブラウザに表示させたいサイズは26px(縦)、26px(横)なので実際のアイコンのサイズの1/2を指定します。こうすることによって、26px(縦)、26px(横)のサイズのアイコンを普通に表示させるよりも、はっきりとアイコンを表示させることができます。実際の画像の倍のサイズを作成し、その半分のサイズを指定することがきもです。

「background-size」の「auto」はグラデーション用に指定しています。

「background-size」で「26px 26px」とアイコン部分の指定しかしない場合、グラデーションの縦のサイズも26pxになってしまうので注意が必要です。

1
2
3
4
5
6
7
8

a.bg {
  background: url(icon_circle.png) no-repeat 5px center,
                gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229)));
  background: url(icon_circle.png) no-repeat 5px center,
                -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229)));
  background-size: 26px 26px;
  -webkit-background-size: 26px 26px ,auto;
}

ボタンを想定し、a要素を記述しています。

1
2
3

<a href="#" class="bg">
    アイコン付きグラデーション
</a>

iphoneとandroidで確認ができます。

サンプル

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

a.bg {
  display: block;
  width: 220px;
  padding: 10px 0 10px 40px;
  border: 1px solid #CCC;
  text-decoration: none;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  background: url(icon_circle.png) no-repeat 5px center,
                gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229)));
  background: url(icon_circle.png) no-repeat 5px center,
                -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229)));
  background-size: 26px 26px;
  -webkit-background-size: 26px 26px ,auto;
}

HTML

1
2
3

<a href="#" class="bg">
    アイコン付きグラデーション
</a>

<

>

PAGETOP