最近のホームページってトップのスライダーなどの写真がディスプレイモニター風になっていることってありますよね。ここではイラストレーターとスタイルシートでこんな画像を作りたいと思います。これは下記の2つの画像を重ねて表現したものです。作成した画像を背景としてリピート表示させるモニター風画像の作り方イラストレーターで背景画像を作成するはじめにイラストレーターでモニター風を表現するパターン画像を作成します。上の画像は分かりやすく色を付けて大きめに作成してありますが、実際は2✕2ピクセルのとても小さな画像として作成します。イラストレーターで2✕2ピクセルのファイルを新規作成しましょう。長方形ツールで1✕1ピクセルの黒い正方形を左上に作ります。正方形は透明度を80%くらいに設定して透かしを入れます。これで背景画像は完成ですのでPNGファイルで書き出しをします。作成したものを載せておきますので、良かったらダウンロードしてお使いください。KBDownload作成した画像を背景としてリピート表示させる画像ができたら、写真と合わせて背景画像として設定すれば完成です。背景画像で表現する必要もなかったのかもしませんが、イラストレーターなどで1枚の画像として重ねてしまうと「モニター感」が失われてしまうので、背景画像として重ねて表現した方が良いですね。ボタンで表示を切り替えてご覧ください。background-repeat:no-repeat;}ここでのポイントは、パターン画像を子要素の背景画像にすること写真を親要素の背景画像にすることパターン画像をリピートさせることの3つです。背景画像の設定が少し難しいのですが、そのあたりの小技は下記の記事にありますので参考にしてみてください。2017.12.13CSS|背景画像を100%表示する方法ここではヘッダー部分などに設定する背景画像を100%表示させる方法と、背景画像の設定に関するスタイルシートの仕組みについてお話します。結論だけ知りたい方のためにソースコードを見ていただこうと思います。0%)になっています。これを好きな場所に配置させたいときに使うbackground-posirionプロパティについてお話します。