HTML、CSSでdivを作成して、そのdivの背景にimageを入れたいときってありますよね。

でも、ぴったりサイズの画像だったら良いんですが、、、

大体の場合は全くぴったりじゃなくて、表示させてい部分そこじゃないよ！アップ過ぎるよ！ズームインしすぎだよ！って時の方が多いですよね。。

例えば、この画像。

pixabay

小さいdivの背景にしてしまうと、、、

こんな感じになっちゃったり、、

いや、もふもふ度はわかるけども、、

そんな時にどうやったら、上手に背景画像として表示できるのかをまとめました。

##background-repeat

まず画像をリピートしたい時。もしくは、したくない時。

したくない時は

background-repeat: no-repeat;

したい時は


/* default設定。左右上下にリピート */
background-repeat: repeat;

/* 左右にリピート */
background-repeat: repeat-x;

/* 上下にリピート */
background-repeat: repeat-y;

##background-color

背景が透過の小さい画像をrepeatさせるときなどは、背景色も変えたいですよね。
そんな時は、background-colorも併用できちゃいます。


background-color: black;
background-image: url(backgroundimage.png);

これで、黒ベースの背景に、backgroundimage.pngという画像がrepeatされることになります。

##background-position

今度は、背景画像の表示開始位置を指定する時に使います。
単純に、right, center, topでの指定や、ピクセル、パーセンテージでの指定ができます。


//右下が表示開始位置
background-position: right bottom;

//表示される領域の左端から20%、上端から40%の位置が背景画像の表示開始位置
background-position: 20% 40%; 

//左上から20px、下に40pxの位置が表示開始位置
background-position: 20px 40px;

##background-size

こちらは、自動的に画像のサイズを調整してくれる優れもの。
分かりやすかったbackground-sizeの記事。from はにはまんさん
https://haniwaman.com/background/

まとめると大きく3種類

要素が確実に覆われけど、画像の全体表示とは限らない『cover』
大きさが変わらない、ありのままを表示する『auto』
画像全体は表示させるが、要素を覆うとは限らない『contain』
背景の幅・高さをpxや%で指定する

まぁよく使うのは、下記。


background-size: cover;

ちなみにmin-height: 100vh;と記載すると、画面いっぱいの高さで表示してくれるみたい。

##background-attachment

たまにオシャレなWEBサイトで、背景画像を固定しているものとかありますよね。下にスクロールしていっても、背景は動かずそのまま、みたいな。

たかふみさんのDEMOサイト
https://takafumimegumi.com/demo/background-attachment/index.html
たかふみさんの解説
https://takafumimegumi.com/blog/background-attachment

オシャレかよ。

やり方は、単純に


background-attachment: fixed;

ってすれば良いみたい。

##「番外編」画像の上にグラデーションをかける

最後に、番外編で画像の上にグラデーションをかける技。


background: linear-gradient(to top, rgba(217, 175, 217, 0.7) 0%, rgba(151, 217, 225, 0.7) 100%), url(image.png);

グラデーションの詳しい掛け方
https://www.sejuku.net/blog/53162

グラデーションをかけるツール
https://www.indetail.co.jp/blog/css3-gradation/

とまぁこんな感じで、まとめ終了。