CSS

CSSのbackground-imageを使って背景画像を設定する方法

CSSのbackground-imageとは何？

background-imageのイメージ

background-imageは背景画像を設定するCSS プロパティです。

CSSのbackground-imageで画像のパスを指定する事によって、コンテンツの背景に画像を設定する事ができます。

owlくん
SEOの観点からHTMLファイルを軽くした方が良い為、HTMLの<img>よりbackground-imageを使って画像を表示させるのがモダンなwebデザインとなっているんじゃよ。
HTMLの<img>タグだとHTMLファイルのコードが長くなってしまいますもんね。background-imageを頑張って覚えていきます。
さとるくん

background-imageの使い方

background-imageで指定できる事

background-image使い方

  1. 背景画像を1枚指定する
    • background-image : url ("画像パス");
  2. 背景画像を2枚重ねて指定する
    • background-image : url("画像パス1"), url("画像パス2");
  3. 背景画像とグラデーションでオーバレイを指定する
    • background-image : linear-gradient(rgba(to 方向,255,255,255,1),rgba(255,255,255,1)),url("画像パス");

背景画像を一枚指定する方法

Web表示

background-imageの指定方法

ポイント

  • background-image: url("画像パス");

画像パスでは絶対パスもしくは相対パスで指定します。"dog.jpg"ファイルはstyle.cssとindex.htmlの同一ディレクトリにあります。

  • background-size:cover;

背景画像の縦横比率を変えずにコンテンツ全体を覆うように適性サイズに調整する。

 

 index.html
<div class="test1">
<div class="test1_2">
background-image
</div>
</div>

 style.css
.test1{
background-image:url("dog.jpg");
background-size: cover;
width:500px;
height:300px;
margin:30px;
}
.test1_2{
text-align: center;
font-size:40px;
color:white;
text-shadow:3px 2px 1px black;
padding: 100px;
}

背景画像を二枚重ねて指定する方法

Web表示

背景画像に二枚の画像を重ねる

ポイント

  • background-image: 　　url("画像1"),url("画像2");
  • 画像1は前面、画像2は背面に表示されます。
  • 画像1に鉛筆の画像の指定
  • 画像2にパレットの画像の指定

 

 index.html
<div class="test3">
<div class="test3_2">
background-image
</div>
</div>

 style.css
.test3{
background-image:url("photo/pencil.png"),url("photo/paltte.png");
background-size: cover;
width:500px;
height:300px;
margin:30px;
}
.test3_2{
text-align: center;
font-size:40px;
font-weight:bold;
color:white;
padding: 100px;
}

background-imageプロパティで画像を２つ指定する事で背景画像を重ねる事ができます。先に指定した画像1が前面に表示されます。

  • レイヤー1はindex.htmlファイルの<div>要素、background-imageという文字
  • レイヤー2は鉛筆の画像
  • レイヤー3はパレットの画像

というレイヤー構成になります。背景画像の重なりは次の画像のようなイメージから想像すると理解しやすいです。

背景画像を二枚重ねて設定する

背景画像とグラデーションのオーバーレイで指定する方法

Web表示

背景色とグラデーションの指定

ポイント

  • background-image:linear-gradient(to 方向,rgba(R,G,B,A),rgba(赤,緑,青,透明度)),url("画像のパス");
  • rgba(R,G,B,A)・・・色と透明度の指定
    • R (Red)・・・0~255
    • G (Green)・・・0~255
    • B (Blue)・・・0~255
    • A (Alpha)・・・透明度0~1

 

 index.html
<div class="test4">
<div class="test4_2">
background-image
</div>
</div>

 style.css
.test4{
background-image:linear-gradient(to right, rgba(239,255,10,0.1),rgba(239,255,10,0.9)),url("flower.jpeg");
background-size: cover;
width:500px;
height:300px;
margin:30px;
}
.test4_2{
text-align: center;
font-size:40px;
font-weight:bold;
color:white;
padding: 100px;
}

 

background-sizeプロパティ

background-sizeプロパティ

background-sizeプロパティは背景画像のサイズを調整する事ができるプロパティです。background-imageで背景画像を設定しbackground-sizeプロパティを指定しなかった場合は、デフォルトでautoが指定されている状態になります。

background-sizeプロパティの値の種類

🔷background-sizeの値 🔷意味
auto 自動的に設定（デフォルト）。画像本来のサイズが大きい場合、一部分のみ抜粋して表示される。
contain 縦横比は維持した状態で範囲に収まるように表示される。空いた余白はリピートされて表示される。
cover 縦横比は維持した状態で範囲を覆うように表示される。
長さpx 背景画像の大きさ、縦横の長さを指定して表示する。
比率 指定範囲に対して背景画像の縦横の長さにパーセンテージをかけて表示する。

画像を繰り返し配置する

Web表示

画像を繰り返し表示する

ポイント

  • コンテンツの範囲[width,height]より背景画像のサイズ[background-size]が小さい場合,背景画像は繰り返しで表示される
    • コンテンツの範囲：heightで縦500px:widthで横幅300pxに指定
    • 背景画像サイズ：100pxに指定
 index.html
<div class="test8">
<div class="test8_2">
background-image
</div>
</div>

 html
.test8{
background-image:url("flower1.jpeg");
background-size: 100px;
width:500px;
height:300px;
margin:30px;
}
.test8_2{
text-align: center;
font-size:40px;
font-weight:bold;
color:white;
padding: 100px;
}

 

背景画像を繰り返さない

Web表示

背景画像を繰り返さない場合

ポイント

  • background-repeat : no-repeat;

background-repeatプロパティでno-repeatを指定した場合は、背景画像は繰り返されません。

逆にbackground-repeatプロパティでrepeatを指定した場合は、背景画像が繰り返されます。

 index.html
<div class="test9">
<div class="test9_2">
background-image
</div>
</div>

 style.css
.test9{
background-image:url("flower1.jpeg");
background-size: 200px;
background-repeat : no-repeat;
width:500px;
height:300px;
margin:30px;
}
.test9_2{
text-align: center;
font-size:40px;
font-weight:bold;
color:white;
text-shadow:3px 2px 1px black;
padding: 100px;
}

背景画像の位置を指定する

Web表示

background-positionプロパティで背景画像の位置を指定する

ポイント

  • background-position: 位置;
    • 上下:top,bottom
    • 左右:left,center,right

background-positionで背景画像の位置を指定する事ができます。

  • top 数値pxもしくはtop 数値%などでも詳細に指定する事ができます。
 index.html
<div class="test10">
<div class="test10_2">
background-image
</div>
</div>

 style.css
.test10{
background-image:url("flower1.jpeg");
background-size: 200px;
background-repeat : no-repeat;
background-position:bottom right;
width:500px;
height:300px;
margin:30px;
}
.test10_2{
text-align: center;
font-size:40px;
font-weight:bold;
color:white;
text-shadow:3px 2px 1px black;
padding: 100px;
}

まとめ

background-imageで背景画像を設定する方法についてご紹介しました。位置やサイズなどについてはbackground-positionやbackground-sizeプロパティを使って設定する事ができます。最後に箇条書きでまとめます。

  • background-image:url("画像パス"); で背景画像を設定する
  • background-size:値; で背景画像を指定する
  • background-position:位置;で背景画像の位置を指定する
  • background-repeat:値; で背景画像をリピートするかしないかを指定
CSS linear-gradientでグラデーションをかける方法

続きを見る
この記事タイトルとURLをコピー

-CSS
-

© 2024 OWLVIEW Powered by AFFINGER5