背景のCSS

背景に画像などを入れたい！CSSで背景を指定する方法

背景の設定にはbackgroundプロパティを使います。
色ならbackground-color、画像を入れるならbackground-imageになります。

→練習用ファイルダウンロード

背景色の指定　background-color

background-colorプロパティは、その名のままで背景に色を指定する時に使います。

CSS　（bodyに使う場合）
body {
background-color: skyblue;
}

バックグラウンドカラーを透過

バックグラウンドカラーを透過したい場合以下のように指定しますが
background-color:rgba(255,165,0,1);

バックグラウンドカラーの透過などに便利な「rgba変換ジェネレーター」を使ってみましょう
https://generator.web-alpha.info/rgba/
https://arts-factory.net/rgbatool/

グラデーション背景の指定　background

ここではCSS Gradientを使ってグラデーション背景を作ります。
グラデーションカラーを好みに設定し「Copy to Clipboard」をクリックしてコピー
そのまま、CSSへペーストするだけです。

CSS　（bodyに使う場合）
body {
background: rgb(74,130,231);
background: linear-gradient(207deg, rgba(74,130,231,1) 0%, rgba(235,250,50,1) 52%, rgba(231,29,101,1) 100%);
}

※ページのコンテンツ量が少ない場合、グラデーションが切れて繰り返し表示されます。
対応：html要素にmin-height: 100%;を設定しておくとブラウザ全体にグラデーションが適用されるようになり解消します。

CSS　
html {
min-height: 100%;
}

背景画像の指定　background-image

背景に画像（Photo）を配置する時は、Background-imageプロパティを使います。
background-image: url(“画像ファイルへのパス”);

background-imageと組み合わせて使い、設定できる値は以下のように4つあります。

• repeat：たて方向、横方向双方に繰り返し表示する（初期値）
• repeat-x：横方向に繰り返し表示する
• repeat-y：たて方向に繰り返し表示する
• no-repeat：繰り返さず1つだけ表示する

このサイズの画像を背景に使っています。

repeat／縦方向、横方向双方に繰り返し表示する（初期値）

CSS　（bodyに使う場合）
body {
background-image:url("fox.png");
}

repeat-x／横方向に繰り返し表示する

CSS　（bodyに使う場合）
body {
background-image:url("fox.png");
background-repeat: repeat-x;
}

repeat-y／たて方向に繰り返し表示する

CSS　（bodyに使う場合）
body {
background-image:url("fox.png");
background-repeat: repeat-y;
}

背景の表示位置を指定する／background-position

background-positionを使用すると、背景画像を横の位置／縦の位置というように表示位置を指定可能です。

横の位置はleft、center、rightを用いて指定できます。
たての位置はtop、bottom、centerを用いて指定できます。
また、パーセントやピクセル、マイナスの値も指定可能です。

CSS　（bodyに使う場合）
body {
background-image:url("fox.png");
background-repeat: repeat-y;
background-position:right;
}

背景画像のサイズ調整

背景に写真などを配置するときに、画像のサイズを調整したいときはbackground-sizeプロパティを使います。

background-sizeに指定できる値

• contain:要素に合わせて画像のサイズを拡大・縮小
• cover:要素に合わせて画像のサイズを拡大・縮小
• auto:画像のたて横比を保つように自動調整

contain／要素に合わせて画像のサイズを拡大・縮小

CSS　（bodyに使う場合）
body {
background-image:url("sea.jpg");
background-position: center;
background-size:contain;
}

cover／要素に合わせて画像のサイズを拡大・縮小

CSS　（bodyに使う場合）
body {
background-image:url("sea.jpg");
background-position: center;
background-size: cover;
min-height: 100vh;
}

auto／画像のたて横比を保つように自動調整

CSS　（bodyに使う場合）
body {
background-image:url("sea.jpg");
background-repeat:no-repeat;
background-size:auto;
}