Firefox 3.6 CSS独自拡張バックグラウンド機能を使う方法

Firefox web browser - Faster, more secure & customizable

css backgrounds in Firefox 3.6 at hacks.mozilla.orgにおいてFirefox 3.6で利用できるようになるCSSバッググラウンド機能が紹介されている。Firefox 3.6では「-moz-background-size」の独自拡張プロパティを使ってサイズを長さや割合で指定できる。同じく、Firefox 3.6で利用できるようになる独自拡張プロパティグラデーション「-moz-linear-gradient, -moz-radial-gradient」と組み合わせた場合のサンプルも掲載されている。

-moz-background-sizeでautoを指定した場合にはオリジナルサイズのままレンダリングされる。割合で指定した場合は、対象となる要素のサイズを100%としてその比率でレンダリングされる。割合がひとつだけ指定された場合には水平方向にのみ適用され、画像は元の縦横比を保ったままスケールされる。割合が2つ指定された場合には、ひとつ目が水平方向に対する割合となり、2つめが垂直方向に対する割合となる。割合の指定は対象となる要素を基準(100%)としてどの程度の割合かを示すものであるため、たとえば100%を指定した場合、画像が対象領域よりも小さければ拡大となる、大きければ縮小となる。


Firefox 3.6独自拡張プロパティの利用例 - 左上はオリジナル画像、右上がauto、左下が100%、右下が10%	Firefox 3.6独自拡張プロパティの利用例 - 左上はオリジナル画像、右上がauto、左下が100%、右下が10%


Firefox 3.6独自拡張プロパティの利用例 - 左は割合をひとつだけ指定、右は割合を2つ指定	Firefox 3.6独自拡張プロパティの利用例 - リサイズ画像、透過グラデーション、画像の組み合わせ例

Firefox 3.6では独自拡張プロパティ(-moz-background-size、-moz-linear-gradient, -moz-radial-gradient)の導入以外にも、CSSプロパティであるbackgroundプロパティ、background-repeatプロパティ、background-positionプロパティが拡張され複数の指定ができるようになっている。これを利用すると複数の画像を重ね合わせて背景をレンダリングすることができるようになる。

重ね合わせることができるため、背景画像の上に、透過を指定したグラデーションを重ね合わせることで、画像そのものがグラデーションしているように見せることもできる。なお、-moz-からはじまる独自拡張プロパティはFirefox以外では利用できない。これらプロパティは実験的に導入されたり、将来的にCSSに提案する目的で実装されることがある。

以降にcss backgrounds in Firefox 3.6 at hacks.mozilla.orgで紹介されている内容をもとにここで掲載したサンプルを表示するためのHTMLを掲載しておく。レンダリングにはFirefox 3.6beta4などが必要。Firefox 3.5で表示しても独自拡張プロパティや重ね合わせは機能しない。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6バックグラウンド画像デモその1</title>
<style type="text/css">
#show_window {
  width: 500px;
}
div.bgbox {
  float: left;
  width: 160px;
  height: 160px;
  border: 1px solid #333;
  margin: 20px 20px 20px 20px;
}
div.bgbox.bgbox_center {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  background-repeat: no-repeat;
  background-position: center center;
}
div.bgbox.bgbox_auto {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: auto;
}
div.bgbox.bgbox_full {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: 100%;
}
div.bgbox.bgbox_tenth {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png);
  -moz-background-size: 10%;
}
</style>
</head>
<body>
<div id="show_window">
  <div class="bgbox bgbox_center"></div>
  <div class="bgbox bgbox_auto"></div>
  <div class="bgbox bgbox_full"></div>
  <div class="bgbox bgbox_tenth"></div>
</div>
</body>
</html>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6バックグラウンド画像デモその2</title>
<style type="text/css">
#show_window {
  width: 500px;
}
div.bgbox {
  float: left;
  width: 160px;
  height: 160px;
  border: 1px solid #333;
  margin: 20px 20px 20px 20px;
}
div.bgbox.bgbox_center {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
div.bgbox.bgbox_auto {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  -moz-background-size: auto;
}
div.bgbox.bgbox_full {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  -moz-background-size: 100%;
}
div.bgbox.bgbox_tenth {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  -moz-background-size: 10%;
}
</style>
</head>
<body>
<div id="show_window">
  <div class="bgbox bgbox_center"></div>
  <div class="bgbox bgbox_auto"></div>
  <div class="bgbox bgbox_full"></div>
  <div class="bgbox bgbox_tenth"></div>
</div>
</body>
</html>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6バックグラウンド画像デモその3</title>
<style type="text/css">
#show_window {
  width: 500px;
}
div.bgbox {
  float: left;
  width: 160px;
  height: 160px;
  border: 1px solid #333;
  margin: 20px 20px 20px 20px;
}
div.bgbox.bgbox_full {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  -moz-background-size: 100%;
}
div.bgbox.bgbox_full_third {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  -moz-background-size: 100% 33%;
}
</style>
</head>
<body>
<div id="show_window">
  <div class="bgbox bgbox_full"></div>
  <div class="bgbox bgbox_full_third"></div>
</div>
</body>
</html>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Firefox 3.6バックグラウンド画像デモその4</title>
<style type="text/css">
#show_window {
  width: 500px;
}
div.bgbox {
  float: left;
  width: 340px;
  height: 340px;
  border: 1px solid #333;
  margin: 20px 20px 20px 20px;
}
div.bgbox.bgbox_multiple {
  background: url(http://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png), -moz-linear-gradient(bottom, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)), url(http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, left;
  -moz-background-size: auto, 100%, 100%;
}
</style>
</head>
<body>
<div id="show_window">
  <div class="bgbox bgbox_multiple"></div>
</div>
</body>
</html>