Définition de l'image d'arrière-plan à l'aide de la propriété CSS de jQuery

Question

J'ai une image URL dans un imageUrl et j'essaie de la définir comme un style CSS, en utilisant jQuery :

$('myObject').css('background-image', imageUrl);

Cela ne semble pas fonctionner, car :

console.log($('myObject').css('background-image'));

renvoie à none .

Une idée de ce que je fais mal ?

Answer 1

Vous voulez probablement ceci (pour que cela ressemble à une déclaration CSS background-image normale) :

$('myObject').css('background-image', 'url(' + imageUrl + ')');

Answer 2

Vous devez inclure des guillemets doubles (") avant et après l'imageUrl comme ceci :

$('myOjbect').css('background-image', 'url("' + imageUrl + '")');

De cette façon, si l'image comporte des espaces, elle sera toujours définie comme une propriété.

Answer 3

Contrairement à ce que les autres suggèrent, je trouve qu'il est plus facile d'activer les classes CSS plutôt que les paramètres CSS individuels (notamment les URL des images d'arrière-plan). Par exemple :

// in CSS 
.bg1 
{
  background-image: url(/some/image/url/here.jpg);
}

.bg2 
{
  background-image: url(/another/image/url/there.jpg);
}

// in JS
// based on value of imageUrl, determine what class to remove and what class to add.
$('myOjbect').removeClass('bg1').addClass('bg2');

Answer 4

Voici mon code :

$('body').css('background-image', 'url("/apo/1.jpg")');

Amuse-toi bien, mon ami.

Answer 5

En complément des autres réponses, vous pouvez également utiliser "background". Ceci est particulièrement utile lorsque vous souhaitez définir d'autres propriétés relatives à la manière dont l'image est utilisée par l'arrière-plan, par exemple :

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");