【CSS】背景画像にドットの網掛けをCSSで簡単に作る方法

サイト全体に背景画像を設置したとき、

「格好いいけどもうちょっとお洒落感をプラスしたいなあ」
「素敵な背景画像だけど文字が目立たない気がする……」
「もうちょい個性をプラスしたい！」

このように、”あともうちょっとなんだけどな”現象に悩むこと、ありますよね。

そんな時は背景画像にドットの網掛けが便利です。

でも画像ひとつひとつ網掛けするのはぶっちゃけだるいんで、今回はCSSで簡単に背景画像に網掛けできる方法をご紹介します。

背景画像にドットの網掛けを簡単に実装するために便利なサイト

まずはこちら！↓

http://www.patternify.com/

PATTERNIFYというこのサイトがドット網掛けをめちゃくちゃ簡単に実装するために必要なので、これから頻繁に網掛けするかもなあって人はブクマ推奨です。

PATTERNIFYサイトの使い方

PATTERNIFYでは自分の好きなドット柄を作ることもできますし、用意されたパターンを選んで設置することも可能です。

ドット色も選べるので、例えば↓

ハート柄だったり、

スイカ柄なんかもできちゃったりします。

（スイカ柄の場合、あまりにも柄面積が多いので画像の上にドットかけても画像が見えなくなる恐れがありますが！）

元々用意されているパターンを選んでも良いですし、ここはお好きに。

PATTERNIFYを使って背景画像にドット網掛けをするCSS

ドット柄ができてきたところで、いよいよ背景画像にドット網掛けを設置してみましょう。

実際使うCSSはこちら↓

クラス名 {
	background-color:transparent;
  background-image:url(PATTERNIFYでコピーしたコード), url(背景画像のURL);
	background-repeat: repeat;
  background-blend-mode: overlay;
  background-position: center; /*背景画像の位置*/
  background-size: auto, cover; /*背景画像をカバーに設定*/
  width: 100%;
  height: 100%;
}

クラス名がわからない時は、chromeのデペロッパーツールなどでクラス名を確認しましょう。

（サイトテーマによってクラス変わるから何とも言えない！とりあえず背景入れたいところのクラス名を調べてください。サイト全体ならbodyあたりかな～。）

実際にドット網掛けを実装してみましたよ

折角なので上で作ったmyドット柄を実装してみましたよ。

ハート柄

ハート柄

.test1{

  background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAEpJREFUKFNjZCASMMLU/Tdr+M94qgHOB4kji4ElQAIwDTDF6GLkK8TmZJAtGCbiVYjuTmTFMDdj+BKbIpAYikJkk9GDCkMhrvAHADThLAuYYhIaAAAAAElFTkSuQmCC), url(画像URL);
	background-repeat: repeat;
  background-blend-mode: overlay;
  background-position: center; /*背景画像の位置*/
  background-size: auto, cover; /*背景画像をカバーに設定*/
  width: 100%;
  height: 100%;
}

わかっちゃいたけどすさまじいですね。