複数の背景画像を使って、引用のコンテンツにデザインを適用する

blockquote要素などの引用コンテンツに対し、背景画像を複数指定して「”」で囲んだように表示する方法を解説します。

この記事のポイント

CSSの背景画像を複数指定する機能を活用する

複数の背景画像で引用を表現する

今回は次のような引用コンテンツを作っていきます。

表示例

左右の「“」はSVG形式のアイコンを使います。

引用のアイコン

CSSのコードは次のようになります。

コード例

<style>
blockquote {
	padding: 20px 50px;
	width: 400px;
	border-radius: 10px;
	background:  url(./images/icon_quote.svg) 15px 15px / 5% auto no-repeat,
		#ccc url(./images/icon_quote.svg) right 15px top 15px / 5% auto no-repeat;
}
</style>
<blockquote>
	<p>ここに引用コンテンツが入ります。</p>
</blockquote>

backgroundプロパティで2つの背景画像を指定しているところがポイントです。
使っている画像自体は同じものですが、それぞれ左側（15px 15px）と右側（right 15px top 15px）で位置をずらしています。