CSS 3のbackground-sizeとbackground-break:FirefoxとSafariのCSS対応
エ・ビスコム・テック・ラボ
2008/03/10 17:15
CSS 3で追加された背景に関するプロパティ。今回は背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを検証してみよう。
前回に続いて、CSS 3で追加された背景に関するプロパティを確認していきたい。
今回は、背景画像の大きさを指定するbackground-sizeと、インライン要素の背景画像の繰り返し方法を指定するbackground-breakを取り上げる。background-sizeにはSafari 3とOpera 9.5が、background-breakにはFirefoxが対応している。
なお、背景に関する規格については、CSS 3の草案CSS3 Backgrounds and Borders Moduleを参考にする。
背景画像の大きさを指定するbackground-size
background-sizeは、背景画像の大きさを指定するプロパティだ。現在、Safari 3が対応しており、-webkit-background-sizeというプロパティ名で利用することができる。また、Opera 9.5(ベータ版)も対応しており、-o-background-sizeというプロパティ名で利用することが可能だ。そこで、Safari 3とOpera 9.5で表示を確認していく。
背景画像の大きさは、横幅と高さを半角スペースで区切って指定する。1つ目の値が横幅で、2つ目の値が高さとなる。次のソースでは、「flower-red.png」を背景画像として指定して、大きさを40×20ピクセルと指定した。
flower-red.png(50×62ピクセル)
div {
background-color: black;
background-image: url(flower-red.png);
padding: 30px;
-webkit-background-size: 40px 20px;
-o-background-size: 40px 20px;
}
<div>FLOWER</div>
※ブラウザで表示を確認する
画像の縦横比を維持して表示するには、横幅または高さのどちらかの大きさを指定し、もう一方を「auto」と指定する。次のソースでは、横幅をauto、高さを20ピクセルと指定した。
div {
background-color: black;
background-image: url(flower-red.png);
padding: 30px;
-webkit-background-size: auto 20px;
-o-background-size: auto 20px;
}
※ブラウザで表示を確認する
- 4人の推薦記事
- 1人がクリップ
-
ソーシャルブックマーク(-)
- トラックバック(0)
- 特集: FirefoxとSafariのCSS徹底検証 (21件)
- 今日のトップ記事
- 2日前
- 3日前
- 4日前
- 6日前
- 7日前
- ホワイトペーパー
- 話題のタグ
Python
ブラウザ
server
Eclipse
Mac OS X
Leopard
HTML
Safari
JavaScript
Windows
SOA
iPod touch
IDE
Linux
Ruby on Rails
小技
イロハ
Tips
Google
Ajax
Firefox 3
仮想化
Internet Explorer
RIA
ライブラリ
Flash
MySQL
XHTML
C/C++
PHP
Java
フレームワーク
Database
Mozilla
CSS
Adobe
リファレンス
Microsoft
Apache
オープンソース
Apple
Firefox
入門
Webデザイン
開発環境
Off Topic
Webアプリケーション開発
iPhone
Ruby
まとめ
話題のタグを見る »




MSもアドビも学生さんに開発ソフトを無償提供
「Economist」のトップページがリニューアル
あなたがプログラムを理解できない10の理由:第2回
新APIまもなく登場--Google Developer Day 2008の見所とは?
仮想化によるコスト削減を見える化:オンラインTCOカリキュレータ
内部統制対策を実現するIT運用管理ツール
リスティング広告における競争優位性の維持
-Simplify IT- ITをシンプルに 連載第2回