WEBページ作成リファレンス
cman.jp cman.jp > WEBページ作成TOP > CSSリファレンス > 「背景画像の設定」

background-image 「背景画像の設定」

background-image プロパティは背景画像の設定を行うことができます。背景画像以外もまとめて背景を指定する場合は、backgroundを使用します。
背景画像は複数指定することもできます。

CSS Ver.適用要素継承
2.1
(※ 3.0で拡張)
全てしない
広告

background-image の値

【構文】

background-image : [image;
image [背景画像の指定]
background: url([画像へのパス]);[例] url("../image/back.gif")

カンマで区切ることで、画像を複数指定することもできます。
(古いブラウザは対応していません)

ページTOP

background-image のサンプル

※ サンプル使用画像

bg-img.png bg-img2.png

1.背景画像の指定

<html>
<head>
<title>背景画像サンプル</title>
  <style type="text/css">
  <!--
    th { background: #00ff40; height: 35px; font-size: 10pt; }
    
    /* 背景画像サンプル(単一画像) */
    td.s1
    {
      background-image: url("./img/bg-img.png");
      width           : 300px;
      height          : 100px;
    }
    
    /* 背景画像サンプル(複数画像) */
    td.s2
    {
      background-image   : url("./img/bg-img2.png"),url("./img/bg-img.png");
      background-repeat  : no-repeat, repeat;
      background-position: left top, left top;
      width              : 350px;
      height             : 100px;
    }
  -->
  </style>
</head>
<body>
<span style="font-size:11pt;" >背景画像サンプル</span>
<table border="1" cellpadding="0" cellspacing="0">
  <tr>
    <th>単一画像</th>
    <th>複数画像</th>
  </tr>
  <tr>
    <td class="s1"></td>
    <td class="s2"></td>
  </tr>
</table>
</body>
</html>
ページTOP
広告
QrCode
このページのURL
スマートフォン・タブレット運営 : CMAN 株式会社シーマン