画像を背景にする方法 〜CSS〜

画像を背景にする方法 〜CSS〜

画像を背景にすることは、よくやりますよね。
私の画像を背景にする方法を簡単に書いておきます。

1.background-image

画像を背景にするには、background-imageを使います。
{background-image: url(“画像へのパス");}

これで背景画像を指定することができます。

※画像パスの書き方は注意が必要で、画像のある場所で書き方が変わります。

上記の場合、htmlフォルダ、imgフォルダ、cssフォルダが横並びにあり、
cssフォルダの中にstyle.cssファイルがあります。
その場合は、背景にしたい画像ファイルの前に「../」を記入します。

2.background-repeat

背景画像を繰り返し表示するか、繰り返し表示にしないかを指定します。

{background-repeat:repeat;}➡️背景画像を繰り返し表示する。
{background-repeat:no-repeat;}➡️背景画像を1回だけ表示して、繰り返さない。

3.width、height

widthとheightで、画像の横幅と縦幅のサイズを設定します。
サイズは、Finderで確認します。

4.background-position

背景画像の位置を指定します。

{background-position: top;}
{background-position: bottom;}
{background-position: left;}
{background-position: right;}
{background-position: center;}
{background-position: ○% ○%;}

など、書き方はいろいろあります。

※中央寄せにする場合は、{margin: 0 auto;}にする。

5.まとめ

.class名{background-image: url(“../img/〜");
    background-repeat:no-repeat;
    width:○px;
    height:○px;
    margin: 0 auto;}

CSS

Posted by decotto703