hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。   エンジニア目指して勉強中。

背景画像を指定1

◉ background-image

background-image プロパティで body要素に画像を指定すると、

ブラウザの表示領域全面に繰り返して表示されてしまう。

継ぎ目の目立たない画像を用意することで、

自然な背景を作ることができる。

 

繰り返しても継ぎ目の見えないような背景画像は、

Photoshop や Firework などのデザインソフトには、

繰り返し用パターン画像素材はいくつか付属してある。

また、継ぎ目のないように、自分で画像を加工する場合もあるが、

インターネット上にはフリー素材として配布されているものも多いので

それらを利用しても良い。

 

 

◉ background-repeat

background-image プロパティで指定した画像の繰り返し方法を指定できるプロパティ。

   ⚫︎ no-repeat  背景画像を一回だけ表示してリピートはしない。

   ⚫︎ repeat-x 横方向のみ繰り返して表示。

   ⚫︎ repeat-y 縦方向のみ繰り返して表示。

 

      ⚫︎ repeat         縦横ともに、背景画像を繰り返して表示。初期値。