jQueryを使ってCSSのbackground-imageプロパティで背景画像を設定する方法

2024-04-02

jQueryを使ってCSSのbackground-imageプロパティで背景画像を設定する方法

方法1: css()メソッドを使う

// 画像のURL
const imgUrl = "https://example.com/image.jpg";

// jQueryを使って要素を選択
const element = $("#element");

// `css()`メソッドを使ってbackground-imageプロパティを設定
element.css("background-image", `url(${imgUrl})`);

// 画像のURL
const imgUrl = "https://example.com/image.jpg";

// jQueryを使って要素を選択
const element = $("#element");

// `attr()`メソッドを使ってbackground-image属性を設定
element.attr("style", `background-image: url(${imgUrl})`);

どちらの方法でも、以下の点に注意する必要があります。

画像のURLは、絶対パスまたは相対パスで指定できます。
画像のURLを二重引用符で囲む必要があります。
背景画像を繰り返し表示したい場合は、background-repeatプロパティを設定する必要があります。

以下は、上記の方法の例です。

<div id="element"></div>

// 方法1: css()メソッドを使う
const imgUrl = "https://example.com/image.jpg";

$("#element").css("background-image", `url(${imgUrl})`);

// 方法2: attr()メソッドを使う
const imgUrl = "https://example.com/image.jpg";

$("#element").attr("style", `background-image: url(${imgUrl})`);

jQueryを使わずにJavaScriptだけで背景画像を設定することもできます。
CSSのbackgroundプロパティを使って、背景画像以外にも背景色や背景位置などを設定することができます。

HTMLコード

<div id="element"></div>

JavaScriptコード

// 方法1: css()メソッドを使う
const imgUrl1 = "https://example.com/image1.jpg";

$("#element").css("background-image", `url(${imgUrl1})`);

// 方法2: attr()メソッドを使う
const imgUrl2 = "https://example.com/image2.jpg";

$("#element").attr("style", `background-image: url(${imgUrl2})`);

実行結果

最初は、image1.jpgが背景画像として表示されます。

コードの説明

imgUrl1とimgUrl2は、背景画像のURLを格納する変数です。
$("#element")は、id属性がelementである要素を選択します。
css("background-image",url(${imgUrl1}))は、background-imageプロパティをurl(${imgUrl1})に設定します。

このサンプルコードを参考に、さまざまな背景画像を設定してみてください。

以下のコードを追加して、ボタンをクリックすると背景画像が切り替わるようにすることができます。

$("#button").click(function() {
  const imgUrl1 = "https://example.com/image1.jpg";
  const imgUrl2 = "https://example.com/image2.jpg";

  const element = $("#element");

  if (element.css("background-image") === `url(${imgUrl1})`) {
    element.css("background-image", `url(${imgUrl2})`);
  } else {
    element.css("background-image", `url(${imgUrl1})`);
  }
});

以下のコードを追加して、背景画像のサイズを調整することができます。

$("#element").css("background-size", "cover");

jQueryでCSSのbackground-imageプロパティを設定する他の方法

方法3: addClass()とremoveClass()メソッドを使う

<div id="element"></div>

// 画像のURL
const imgUrl1 = "https://example.com/image1.jpg";
const imgUrl2 = "https://example.com/image2.jpg";

// jQueryを使って要素を選択
const element = $("#element");

// 最初にimage1クラスを追加
element.addClass("image1");

// ボタンをクリックすると、image1クラスを削除し、image2クラスを追加
$("#button").click(function() {
  element.removeClass("image1");
  element.addClass("image2");
});

// .image1クラスと.image2クラスのスタイル
.image1 {
  background-image: url(${imgUrl1});
}

.image2 {
  background-image: url(${imgUrl2});
}

<div id="element"></div>

// 画像のURL
const imgUrl1 = "https://example.com/image1.jpg";
const imgUrl2 = "https://example.com/image2.jpg";

// jQueryを使って要素を選択
const element = $("#element");

// 最初にimage1というデータをdata属性に設定
element.data("image", imgUrl1);

// ボタンをクリックすると、data属性のimageの値を取得し、background-imageプロパティに設定
$("#button").click(function() {
  const imgUrl = element.data("image");

  if (imgUrl === imgUrl1) {
    element.data("image", imgUrl2);
  } else {
    element.data("image", imgUrl1);
  }

  element.css("background-image", `url(${imgUrl})`);
});