【CSS】背景画像にかぶせるパターンを簡単につくれる Patternify を使ってみた

Posted at 2021-09-02

こんにちはデザイナーの@kannaです。
前からずっと気になっていた 背景画像や動画にパターンを被せる方法 を学ぶ機会があったので学習メモとして残しておきます。

#どこにパターンをかけるのか

Webサイトのファーストビュー

#作成の流れ

ツールを使ってパターンを作成する
生成されるコードをコピー
cssの該当ヶ所にコピーしたコードをペースト
cssにパターンを表示するコードを追記する

#使用するツール
見つけたのは「Patternify」というサイトを利用する方法です。

開くとこんな画面が表示されます↓

#Patternifyの使い方

【機能説明】
①パターン作成エリア
②表示エリアを指定する
③カラーパネル　
④opacity＝透明度調整
⑤４つのアイコン（戻る/ペン/消しゴム/スポイト）

パターンはリピートされる前提なので、左右上下にリピートされた場合どのように見えるかを考えながら作成するのがポイントです。いろいろイジってみましょう。作成したパターンは右側の __Preview__で確認できます。
※ペンツールの下にいくつかパターン

とは言っても実際のデザインに反映してみないとなかなかイメージ出来ないかと思うので、コードに埋め込んで確認をしながら調整をするようにしましょう。

#作成したパターンをデザインに反映させる

####作成したパターンの使い方は__3パターン__あります。

previewの「Download PNG」ボタンを押してダウンロードして使用する
Base64 Codeに表示されている⑥のコードを使う
⑦の「Get Pattern URL」ボタンを押してURLを取得して使う

今回はコード埋め込みをして利用するので、Base64 Codeに表示されている⑥のコードを使って埋め込んでみます。

See the Pen 背景画像の上にパターンをのせる by m-akagi (@kanna999-) on CodePen.

ファーストビューの背景画像を指定したCSSのクラスに追記します。サンプルでは.src1クラスに追記しています。

css

.src1 {
   background-image: url("ここにパターンのコードをペースト"),url("背景画像のURL");
}

background-image:url("背景画像のURL");にもう１つ url(""),を追加してその中に⑥のコードをペーストします。url(""),は背景画像のurlの前に入れます。
URLを入れただけではパターンが反映されないので、CSSを追記していきます。

css

.src1 {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAAXNSR0IArs4c6QAAABhJREFUGFdjZEACjHp6ev8vXboEphmRZQBrKwWNTXkrSAAAAABJRU5ErkJggg=="),url("https://drive.google.com/uc?export=view&id=1D8WqoRgWao_Ac_xUh9cAmozt6JBE0LUx");/* 背景画像の前にパターンのURLを入れる */
  background-repeat: repeat, no-repeat; /* パターンのリピート */
  background-blend-mode: overlay; /* パターンをオ−バーレイで表示 */
  background-size: auto, cover;/* パターンにautoを指定 */
  position: absolute; /* absoluteに指定 */
  width: 600px;
  height: 450px; 
  top:0;
  left:0;
  z-index: 1;/* 前面に表示 */
}