CSSのみで背景画像を自由自在に操る！拡大縮小・配置・繰り返し表示の3つの方法
2024-04-02
CSSのみで背景画像を拡大縮小する
方法
以下の3つの方法を紹介します。
background-size プロパティを使用する
これは最も簡単な方法です。background-size プロパティを使用して、背景画像のサイズを指定できます。
.element {
background-image: url(image.jpg);
background-size: contain; /* または cover */
}
contain は、画像の縦横比を維持しながら、要素内に収まるようにサイズを調整します。cover は、要素全体を覆うように画像を拡大縮小します。
background-position プロパティを使用して、背景画像の位置を調整できます。
.element {
background-image: url(image.jpg);
background-size: cover;
background-position: center center; /* または top left, bottom right など */
}
center center は、画像を水平方向と垂直方向に中央に配置します。
.element {
background-image: url(image.jpg);
background-size: 100px 100px;
background-repeat: repeat; /* または no-repeat, repeat-x, repeat-y */
}
repeat は、画像を水平方向と垂直方向に繰り返し表示します。
CSSのみを使用して、背景画像をさまざまな方法で拡大縮小できます。上記の例を参考に、自分の目的に合った方法を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSSのみで背景画像を拡大縮小するサンプル</title>
<style>
body {
font-family: sans-serif;
}
.container {
width: 500px;
height: 300px;
margin: 20px auto;
border: 1px solid #ccc;
}
.element1 {
background-image: url(image1.jpg);
background-size: contain;
}
.element2 {
background-image: url(image2.jpg);
background-size: cover;
background-position: center center;
}
.element3 {
background-image: url(image3.jpg);
background-size: 50px 50px;
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>CSSのみで背景画像を拡大縮小するサンプル</h1>
<p>以下の3つの方法を紹介します。</p>
<h2>1. `background-size` プロパティを使用する</h2>
<p>画像の縦横比を維持しながら、要素内に収まるようにサイズを調整します。</p>
<div class="container element1">
<p>This is element 1.</p>
</div>
<h2>2. `background-position` プロパティを使用する</h2>
<p>画像を水平方向と垂直方向に中央に配置します。</p>
<div class="container element2">
<p>This is element 2.</p>
</div>
<h2>3. `background-repeat` プロパティを使用する</h2>
<p>画像を水平方向と垂直方向に繰り返し表示します。</p>
<div class="container element3">
<p>This is element 3.</p>
</div>
</body>
</html>
このコードを実行すると、3つの要素が表示されます。
- 1つ目の要素は、
background-size: containを使用して、画像の縦横比を維持しながら要素内に収まるようにサイズが調整されています。 - 2つ目の要素は、
background-size: coverとbackground-position: center centerを使用して、画像を要素全体を覆うように拡大縮小し、水平方向と垂直方向に中央に配置されています。 - 3つ目の要素は、
background-size: 50px 50pxとbackground-repeat: repeatを使用して、画像を50px x 50px のタイル状に繰り返し表示しています。
実行方法
- 上記のコードを HTML ファイルとして保存します。
- ブラウザでファイルを開きます。
CSSのみで背景画像を拡大縮小するその他の方法
@media クエリを使用して、画面サイズに応じて背景画像のサイズを調整できます。
@media (max-width: 768px) {
.element {
background-size: contain;
}
}
@media (min-width: 769px) {
.element {
background-size: cover;
}
}
上記のコードは、画面幅が768px以下の場合は background-size: contain を、769px以上の場合は background-size: cover を使用します。
object-fit プロパティを使用して、画像の表示方法を指定できます。
.element {
background-image: url(image.jpg);
background-size: cover;
object-fit: contain; /* または cover, fill, none */
}
transform プロパティを使用して、画像を拡大縮小できます。
.element {
background-image: url(image.jpg);
background-size: cover;
transform: scale(1.2); /* または scaleX(1.2), scaleY(1.2) */
}
scale(1.2) は、画像を1.2倍に拡大します。scaleX(1.2) は、画像を水平方向に1.2倍に拡大し、scaleY(1.2) は、画像を垂直方向に1.2倍に拡大します。
css background
