HTML & CSS

最終更新日:
公開日:

レシピ

画像

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

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)で位置をずらしています。