HTML DOMのbackgroundプロパティとは？使い方と値を徹底解説
backgroundプロパティとは
HTML DOMのbackgroundプロパティは、要素に関連付けられた背景画像や背景色を設定・取得するために使用されるプロパティです。ショートハンド（一括指定）プロパティとして機能し、最大8つの個別プロパティをまとめて操作できるのが特徴です。
構文
backgroundプロパティを設定する際の構文は以下のとおりです。
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
指定できる値の一覧
backgroundプロパティには、以下の8つの値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | color 要素の背景色を設定します。 |
| 2 | image 要素の背景画像を設定します。 |
| 3 | repeat 背景画像の繰り返し方法を設定します。 |
| 4 | attachment 背景画像を固定表示するか、ページのスクロールに合わせて動かすかを設定します。 |
| 5 | position 背景画像の表示開始位置を設定します。 |
| 6 | size 背景画像のサイズを設定します。 |
| 7 | origin 背景画像の配置基準となる領域を指定します。 |
| 8 | clip 背景画像が描画される範囲を設定します。 |
使用例
ここで、backgroundプロパティを使った具体的なコード例を見てみましょう。ボタンをクリックすると、div要素の背景画像が別の画像に切り替わるサンプルです。
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="背景URLが変更され、新しい背景画像が表示されました。";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>下のボタンをクリックすると、上のdivの背景画像が変更されます</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html>出力結果
上記のコードを実行すると、次のような画面が表示されます。
続いて、「CHANGE BACKGROUND」ボタンをクリックすると、背景画像が新しいものに切り替わります。
このように、JavaScriptからstyle.backgroundプロパティを操作することで、ページ上の要素の背景を動的に変更できます。背景色・画像・繰り返し・位置などを一括で制御したい場合に非常に便利なプロパティです。
-
【初心者向け】HTML DOMのfilterプロパティとは？使い方とフィルター効果一覧を解説
HTML DOMのスタイルfilterプロパティは、要素に対してさまざまな視覚効果（フィルター）を適用するために使用されます。ぼかしや明るさの調整、グレースケール変換など、CSSのfilter機能をJavaScriptから動的に操作できるのが特徴です。 構文 filterプロパティを設定する際の基本構文は以下の通りです。 object.style.filter = none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | satu
-
HTML DOMのlistStyleImageプロパティとは？使い方をコード例付きで解説
HTML DOM の listStyleImage プロパティは、リスト項目（<li>）のマーカーとして画像を設定したり、現在設定されている画像を取得したりするために使用されるプロパティです。通常の「●」や「■」といった箇条書き記号の代わりに、任意の画像をリストマーカーとして表示できます。 listStyleImageプロパティの構文 listStyleImage プロパティを設定する場合の構文は以下のとおりです。 object.style.listStyleImage = none|url|initial|inherit 指定できる値の一覧 それぞれの値の意味は次の表のとおり