CSSで枠の背景に画像を表示するコードを紹介します。
枠の背景に画像を表示したい場合があります。background-imageプロパティを利用すると、枠の背景に画像を表示できます。
background-image: url([画像のURL]);
background-image: url('/images/icon.jpg');
background-image: url('https://www.ipentec.com/logo.png');
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BackgroundImageSimple.css" />
</head>
<body>
<div class="Frame1">
枠です。
</div>
</body>
</html>
.Frame1 {
height: 20rem;
border: 1px solid #000000;
background-image: url('image.png');
}
以下の画像を用意します。
高さ20remの枠で背景に用意した画像を表示します。
.Frame1 {
height: 20rem;
border: 1px solid #000000;
background-image: url('image.png');
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
枠の背景に画像が表示できています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="BackgroundImageBoldBorder.css" />
</head>
<body>
<div class="Frame1">
点線の枠です。
</div>
</body>
</html>
.Frame1 {
height: 20rem;
border: 32px dashed #606060;
background-image: url('image.png');
}
先ほどと同様に高さ20remの枠で背景に用意した画像を表示します。
枠線が点線の太線を指定しているため、線のない部分に背景画像がどのように表示されるかを確認します。
.Frame1 {
height: 20rem;
border: 32px dashed #606060;
background-image: url('image.png');
}
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
枠の背景に画像が表示できています。
画像のタイリングの基準位置は枠線の内側の左上になりますが、点線部分の背景にも画像が表示されていることがわかります。
