本ブログの背景にテクスチャを入った画像にしようと思い、CSSでも初歩的な background プロパティを使用してパターン背景を実装しましたので、その方法を改めてまとめてみました。
パターン背景そのものを作成する方法は、下の記事でまとめていますので、気になる方は是非チェックしてみてください！
目次
パターン背景について
パターンとは本来、「pattern design」のことで、同じ模様や絵柄を繰り返し点在させるデザインのことです（weblio）。ドットやストライプなどの幾何学模様の繰り返しや植物みたいな動きのあるモチーフのものでも上手いこと繰り返し繋がるように作ることでパターンとして扱います！
Webにおいては、データ容量を小さくするために、小さい画像を repeat させて表示させることもあり、厳密には違うのですがテクスチャなんかも“パターン”として話が通じる感じがあります。
最近は通信速度の高速化により、そこまでデータ容量を切り詰めることが重要視されていない傾向があるため、容量よりもデザイン重視の傾向が高まり、写真や動画などを背景に使用することが増えている印象です。
background プロパティの一括指定について
まず background の一括指定のプロパティを復習しておきたいと思います。以下8つのプロパティがあります。
background-color
background-image
background-repeat
background-position
background-size
background-clip
background-origin
background-attachment
基本的には、指定したいプロパティをこの順序で記述するのが良いようです。（使用しないものは省略可）また、「background-position」と「background-size」を同時に指定する場合は / （スラッシュ）で区切ります。
例えば、
background: url('example.jpg') no-repeat center / cover;みたいな感じで記述します。
パターン背景を background プロパティで指定する
さて今回、実際に実装してみたコードのサンプルです。
body{
background:rgba(255,255,255,1) url("../images/bgimage.png");
}パターンということで、「background-color」と「background-image」以外は初期値でいいので、省略しています。「background-repeat」の初期値「repeat」が適用されていることにより、一枚の画像が繰り返し表示されます。この部分は、記載がないけどパターン背景の肝となる部分で理解しておくべきだと個人的に思います。
ざらざら質感の背景
今回は、ざらざら質感の背景を実装してみました。
作り方は下の記事で掲載しています。
デザインのビフォーアフターはこんな感じです。
今回実装した背景画像は並べたときに“シームレスに”なるように画像が調整されているので、まるで1枚の画像のように見せています。“パターン”と言われたら厳密には違うのかもしれませんがデータ上では一枚の小さな画像を繰り返し敷き詰めて表示させているので、“パターン”なのかなぁと思います……。
これはすごく簡単に実装できる割に、少しだけリッチなデザインにすることができておススメです。メインコンテンツやサイドバーなどのブロックエリアを白背景にしてあげることで、背景とブロックに境目ができて、写真とかまだあまり載せられていない殺風景（シンプル）なデザインをとりあえずそれっぽいデザインにすることができると思います！
感想
background に背景パターンを入れるのは、htmlを触り始めたほんとに最初のころにやった記憶がある古の技法で、今では写真とか動画の背景を入れ込むことが多くなってきている中で、改めてやってみるとシンプルがゆえに奥が深いテクニックだなぁと思いました。
古臭いやり方だと思ってあまり使ってきませんでしたが、結局大切なのはどんな素材を使うか、デザインの良し悪しを決めるということに気づかされました。今後はもっと積極的にいい素材を発掘していけたらと思います。
出典
weblio. 「pattern」. https://www.weblio.jp/content/パターン, 2023年5月6日閲覧。
参考文献
MDN Web Docs. 「background」. https://developer.mozilla.org/ja/docs/Web/CSS/background, 2023年5月6日閲覧。
W3C. 「CSS Backgrounds and Borders Module Level 3」. https://www.w3.org/TR/css-backgrounds-3/#background-properties, 2023年5月6日閲覧。
関連投稿:
- タグ：
- CSS
