TOP ＞ スタイルシートで背景をデザイン ＞ 背景画像の位置をcssでコントロールする
背景画像の位置をcssでコントロールする
HTMLで背景画像を指定するよりも、background-imageプロパティを使った場合に良い点は、 背景画像の位置を細かく指定できる点です。指定を特にしていない場合、画像の左上が要素の左上に配置されます。
画像の位置を指定するには｢background-position｣ プロパティを使用します。
位置の指定は、横方向（x-方向）と縦方向（y-方向）の位置を、キーワードか値を、スペースで区切って並べます。（値はパーセントでも可）
| キーワード | 横方向の表示位置 | 同義の% |
| left | 背景画像の左端をパディング部分の左端に合わせる | 0% |
| center | 背景画像の中央をパディング部分の中央に合わせる | 50% |
| right | 背景画像の右端をパディング部分の右端に合わせる | 100% |
| キーワード | 縦方向の表示位置 | 同義の% |
| top | 背景画像の上端をパディング部分の上端に合わせる | 0% |
| center | 背景画像の中央をパディング部分の中央に合わせる | 50% |
| bottom | 背景画像の下端をパディング部分の下端に合わせる | 100% |
キーワードを使って背景画像の位置をコントロールする場合、値を一つだけに省略することもできます。数値を指定する場合、 一つだけに省略すると、それは横方向の位置を表すことになり、縦方向は｢center｣が自動的に設定されます。
| キーワード | 省略された内容 |
| left | left center が指定されます |
| right | right center が指定されます |
| top | center top が指定されます |
| bottom | center bottom が指定されます |
| center | center center が指定されます |
また、マージンを指定する場合、その部分には背景画像は表示されません。
背景画像の位置をcssでコントロールする
【書き方】
background-position : 横方向 縦方向（キーワードもしくは値） ;
"背景画像の位置をcssでコントロールする"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{background-color:#bbffff; font-size: 28px;} .c1{background-image: url(http://www.1css.net/sample/303.gif);} .c2{background-image: url(http://www.1css.net/sample/303.gif); background-position: center center;} .c3{background-image: url(http://www.1css.net/sample/303.gif); background-position: 25px 40px;} 【HTML本文】 <html> <head> <title>背景画像の位置をcssでコントロールするのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/303.css" type="text/css"> </head> <body> <p class="c1">background-positionを指定していません。<br /><br />背景画像の左上と文字段落の左上の位置がそろっています。</p> <p class="c2">background-positionに横center・縦centerで指定しました。<br /><br />背景画像の中心が文字段落の中心の位置がそろっています。</p> <p class="c3">background-positionに横25px・縦40pxで指定しました。<br /><br />背景画像の左上が文字段落の左上の位置から右に25px、下に40pxずれています。</p> </body> </html> |
[
スタイルシートで背景をデザイン ]
