385 votes

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

J'ai une URL dans une variable, et j'ai des problèmes en définissant la valeur en CSS.

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

// $('myObject').css('background-image'); returns 'none'
 

Des pointeurs?

938voto

Greg Points 132247

Vous voulez probablement ceci (pour le faire comme une déclaration d'image de fond CSS normale):

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

72voto

Arosboro Points 516

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

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

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

48voto

Kon Points 16125

Alternativement à ce que les autres suggèrent correctement, je trouve qu'il est plus facile de basculer les classes CSS, plutôt que les paramètres CSS individuels (en particulier les URL d'image de fond). 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');
 

15voto

Apo Points 79

Voici mon code:

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

Enjoy, ami

13voto

Matt Parkins Points 1765

Suite aux 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 façon dont l'image est utilisée en arrière-plan, telles que:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X