画像適用でテクスチャー作成

目的

お気に入りの画像を適用してテクスチャーを作りたい。

実行結果

画像のテクスチャー

解説

画像をそのまま背景に使っています。画像なのでCSSで作ったアイボリーの和紙よりもデザイン性が優れています。

HTML

<div class="layout_8_3">画像のテクスチャー</div>

CSS

.layout_8_3 {
	font-size: 16px;
	color: #000000;
	background-image: url(../../image/layout/8-3.jpg);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: top;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 96%;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	aspect-ratio: 1600/600;
	overflow: hidden;
}

aspect-ratioの値は画像サイズをそのまま書けばOKです。上記画像はW1600×H1200なので16行目はaspect-ratio: 1600/1200;と書きます。ただし画像のサイズを変えたい事があるはずなので、実行結果の画像はサンプルとしてheight(高さ)をカットしています(下述)。
画像を引き伸ばしたり縮めたりせずにサイズを変える時は16行目の右側の数字を変えてください。元画像はW1600×H1200なのですがaspect-ratio: 1600/600;とする事で、デザインを引き伸ばしたり縮めたりせず、height(高さ)だけ50%カットしています。サイズを変える場合はそこで調整してください。
7行目はcenterと書けば画像中央が起点になりbottomと書けば画像下段が起点になります。

その他のテクスチャー画像

右クリックからダウンロード可能です。