WEBサイトの背景を画像にしてるサイトはたくさんあります。
それほどWEB製作の基本中の基本なのでやり方を覚えておきましょう。
背景画像はCSS「background-image」を使用
WEBサイトの背景を画像にしたい場合「background-image」使用します。
「画像なのだからHTMLでしょ」と思うかもしれませんが、背景画像についてはCSSで指定します。
background-image: url( 画像ファイルのURL );
背景画像を指定するにはbackground-image: url(画像URL);を使用します。
WEBサイト全体に背景画像を使用する場合は、bodyに対してbackground-imageで指定します。
【注意】
背景画像はCSSファイルがあるフォルダに入れておかないと正常に表示されないので気をつけよう。
background-repeat
background-imageで背景画像を指定すると、同じ背景画像が繰り返し表示されます。
background-repeat: no-repeat;を指定して、背景画像の繰り返し表示をやめさせましょう。
background-size
background-sizeで背景画像のサイズを指定できます。
サイズの指定には「px」「%」で数字を当てはめる他にも「auto」「cover」「contain」があります。
| auto | 元の画像と同じサイズ |
| cover | 縦横の比率を保ったまま、要素に合わせたサイズになる |
| contain | 縦横の比率を保ったまま、要素に全て表示される |
画像サイズに合わせて使用しましょう。
background-position: ○;
background-positionで背景画像の位置を指定できます。
| top | 上端に揃える |
| bottom | 下端に揃える |
| left | 左端に揃える |
| right | 右端に揃える |
| center | 真ん中に配置する |
「px」「%」でも位置を指定する事ができます。
background-attachment
デフォルトの状態では、背景画像がスクロールに伴って移動します。
背景画像を固定するには「background-attachment: fixed;」を指定します。
PokerChoice