TOP ＞ スタイルシートで背景をデザイン ＞ 背景画像の繰り返し方法を決める
背景画像の繰り返し方法を決める
背景画像を、たとえば、写真などにする場合、background-imageプロパティで指定するだけだと縦方向・ 横方向に繰り返し表示してしまうので、どこかデザイン的にみっともなくなってしまいます。css/スタイルシートを使えば、 背景画像の繰り返し方を指定することが出来ます。
背景画像の繰り返し方法を指定するには｢background-repeat｣ プロパティを使用します。 デフォルトでは値は"repeat"に設定されており、縦横ともに繰り返し表示の設定になっているのは、先ほど述べたとおりです。
"repeat-x""repeat-y"はそれぞれ横方向（x-方向）、縦方向（y-方向）のみに背景画像を繰り返します。 背景画像を繰り返したくない場合は"no-repeat"を指定します。
｢background-position｣プロパティと｢background-repeat｣ プロパティを組み合わせて使うことで、 背景画像を表示したい場所に一度だけ表示することも可能です。
背景画像の繰り返し方法を決める
【書き方】
background-repeat : [repeat | repeat-x | repeat-y | no-repeat] ;
"背景画像の繰り返し方法を決める"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{background-color:#bbffff; font-size: 28px;} .c1{background-image: url(http://www.1css.net/sample/303.gif); background-repeat: repeat;} .c2{background-image: url(http://www.1css.net/sample/303.gif); background-repeat: repeat-x;} .c3{background-image: url(http://www.1css.net/sample/303.gif); background-repeat: repeat-y;} .c4{background-image: url(http://www.1css.net/sample/303.gif); background-repeat: no-repeat;} 【HTML本文】 <html> <head> <title>背景画像の繰り返し方法を決めるのサンプル</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/304.css" type="text/css"> </head> <body> <p class="c1">background-repeat を ”repeat”で設定しています。<br /><br />背景画像が縦方向横方向に繰り返して表示されます。</p> <p class="c2">background-repeat を ”repeat-x”で設定しています。<br /><br />背景画像が横方向のみに繰り返して表示されます。</p> <p class="c3">background-repeat を ”repeat-y”で設定しています。<br /><br />背景画像が縦方向のみに繰り返して表示されます。</p> <p class="c4">background-repeat を ”no-repeat”で設定しています。<br /><br />背景画像が繰り返さずに一回だけ表示されます。</p> </body> </html> |
[
スタイルシートで背景をデザイン ]
