背景画像の表示位置のレンダリング

 
背景
ホーム > CSS2 Note > background-position > 背景画像の表示位置のレンダリング

「0% 0%」=「top left」=「left top」

[0% 0%]=[top left]=[left top]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:0% 0%;}  /* [0% 0%]=[top left]=[left top] */
--></style>

<body>
</body>
背景には以下のような画像を指定しています。
ロールティシューダブル
 

「50% 0%」=「top」=「top center」=「center top」

[50% 0%]=[top]=[top center]=[center top]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:50% 0%;}  /* [50% 0%]=[top]=[top center]=[center top] */
--></style>

<body>
</body>
 

「100% 0%」=「right top」=「top right」

[100% 0%]=[right top]=[top right]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:100% 0%;}  /* [100% 0%]=[right top]=[top right] */
--></style>

<body>
</body>
 

「0% 50%」=「left」=「left center」=「center left」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[0% 50%]=[left]=[left center]=[center left]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:0% 50%;}  /* [0% 50%]=[left]=[left center]=[center left] */
--></style>

<body>
</body>
 

「50% 50%」=「center」=「center center」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[50% 50%]=[center]=[center center]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:50% 50%;}  /* [50% 50%]=[center]=[center center] */
--></style>

<body>
</body>
 

「100% 50%」=「right」=「right center」=「center right」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[100% 50%]=[right]=[right center]=[center right]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:100% 50%;}  /* [100% 50%]=[right]=[right center]=[center right] */
--></style>

<body>
</body>
 

「0% 100%」=「bottom left」=「left bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[0% 100%]=[bottom left]=[left bottom]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:0% 100%;}  /* [0% 100%]=[bottom left]=[left bottom] */
--></style>

<body>
</body>
 

「50% 100%」=「bottom」=「bottom center」=「center bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[50% 100%]=[bottom]=[bottom center]=[center bottom]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:50% 100%;}  /* [50% 100%]=[bottom]=[bottom center]=[center bottom] */
--></style>

<body>
</body>
 

「100% 100%」=「bottom right」=「right bottom」 (ie8- -ff3 -o9 -sf4 -gc2未対応)

[100% 100%]=[bottom right]=[right bottom]


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:100% 100%;}  /* [100% 100%]=[bottom right]=[right bottom] */
--></style>

<body>
</body>
 

CSS2.1の仕様書におけるキーワードと長さや%値との組み合わせ (ie8- -ff3 -o9 -sf4 -gc2未対応)

「top 25%」


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:top 25}
--></style>

<body>
</body>

「right 25%」


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:right 25%;}
--></style>

<body>
</body>

「bottom 25%」


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:bottom 25%;}
--></style>

<body>
</body>

「left 25%」


<style type="text/css"><!--
body {background:url(img/roll.gif) no-repeat; background-position:left 25%;}
--></style>

<body>
</body>
背景には以下のような画像を指定しています。
ロールティシューダブル
 
トップページ CSS2 Note ページトップ
 2009/02/01発行 2009/09/01更新