HTML、CSSでdivを作成して、そのdivの背景にimageを入れたいときってありますよね。
でも、ぴったりサイズの画像だったら良いんですが、、、
大体の場合は全くぴったりじゃなくて、表示させてい部分そこじゃないよ！ アップ過ぎるよ！ ズームインしすぎだよ！って時の方が多いですよね。。
例えば、この画像。
小さい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/
とまぁこんな感じで、まとめ終了。