の 背景画像 CSS のプロパティは、要素の背景として画像を設定するために使用されます。この CSS プロパティを使用すると、要素に 1 つまたは複数の背景画像を設定できます。

デフォルトでは、画像は要素の左上隅に配置され、水平方向と垂直方向の両方に繰り返されます。背景画像は文字の色に合わせて選択してください。テキストと背景画像の組み合わせが不適切であると、Web ページのデザインが不十分で読みにくくなる可能性があります。

の URL() このプロパティの値を使用すると、任意の画像へのファイル パスを含めることができます。要素の背景が表示されます。背景には複数の画像、またはグラデーションと画像を組み合わせて使用​​できます。背景画像の読み込みに失敗した場合、またはグラデーションを使用しているが対応するブラウザーでサポートされていない場合は、要素の背景色としてフォールバック値 (置換として使用される値) を使用できます。

XMLコメント

構文

 background-image: url(); 

価値観

URL(): 画像のURLです。複数の画像を指定する場合は、URL をカンマで区切ることができます。

CSSを使った枠線

例

 body { background-image: url('cat.webp'); background-color: lightgray; } 

出力

例

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 

出力

例

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 

出力