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

379

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

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

Cela semble ne pas fonctionner, car:

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

retourne none.

Une idée, ce que je fais mal?

javascript jquery css

— Blankman
source

1

Quel est exactement le problème? Jquery lance-t-il une erreur?

— Mike_G

Non, ce n'est pas réglé correctement. Je l'enregistre et cela ne change tout simplement pas.

— Blankman

2

La première fois, jQuery n'essaie pas de deviner ce que l'utilisateur voulait dire.

— gblazex du

926

Vous voulez probablement cela (pour le faire comme une déclaration d'image d'arrière-plan CSS normale):

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

— Greg
source

Je le faisais de cette façon - mais un espace entre 'url' et les parenthèses gauches faisait échouer mon code. Copiez / collez le vôtre et réalisez le problème. Merci!

— pmartin

J'utilise votre code dans ce script mais obtenez-moi background-image: url ((inconnu)); Voici mon script: var bg_img = jQuery ('. Wp-show-posts-inner'). Attr ('data-src'); jQuery ('. wp-show-posts-inner'). on ('mouseover', function () {jQuery ('. home-banner .bg'). css ('background-image', 'url (' + bg_img + ')');}); Une idée pourquoi?

— Gaston Coroleu

71

Vous voudrez 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 a des espaces, elle sera toujours définie comme une propriété.

— Arosboro
source

6

dans ce cas, cela devrait être$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro

4

Les devis ne sont pas nécessaires: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullité

Cela l'a résolu pour moi. J'avais besoin d'avoir les doubles guillemets. Mes noms d'images contiennent des espaces. Sinon, rien ne se produirait. Je pourrais faire fonctionner quelque chose $('.myObject').css('background-color', 'green'); , mais pas changer l'image sans les guillemets doubles. Merci!

— Ghost Echo

1

encodeURIComponentne fonctionnera pas si une partie de votre URL contenait déjà des caractères d'échappement d'URL. Vous devriez cependant échapper au caractère de double guillemet potentiel dans imageUrl:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

D'ailleurs, faire $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');m'a donnébackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

Alternativement à ce que les autres suggèrent correctement, je trouve généralement plus facile de basculer les classes CSS, au lieu des paramètres CSS individuels (en particulier 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');

— Kon
source

2

C'est une bien meilleure façon de faire les choses car elle vous permet d'utiliser un pré-processeur CSS.

— calumbrodie

C'est formidable, bien meilleur que la solution plus directe.

— Magicode

Cela va cependant charger les deux images.

— sheriffderek du

Est-ce réellement une solution recommandée? Il semble que cela nécessite inutilement plus d'informations, par exemple dans le cas où il y a une troisième image de fond possible, vous devrez supprimer toutes les autres images de fond, ou alternativement garder une trace de l'image "actuelle". Et aussi d'avoir des détails de configuration, tels que ces URI dans les fichiers .css me rend fou. : smiley: Je dois chercher partout dans le code!

— Anne van Rossum

L'utilisation de classes comme celle-ci est également ma préférence car elle vous permet de garder une séparation nette entre le code et le style. Je peux ensuite changer toutes mes images et animations dans le CSS (via des sélecteurs de médias et autres) sans me soucier du code. Vous n'avez pas à chercher partout dans le code si vous gardez vos images HORS du code!

— Evan Langlois

14

Voici mon code:

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

Profitez-en, ami

— Apo
source

13

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

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

— Matt Parkins
source

Cette réponse avait plus de sens lorsque je pensais que l'opération d'origine avait utilisé l'arrière-plan et non l'image d'arrière-plan. J'ai modifié ma réponse pour avoir plus de sens, et je laisserai cela ici pour la postérité de toute façon.

— Matt Parkins

6

Pour ceux qui utilisent une URL réelle et non une variable:

$('myObject').css('background-image', 'url(../../example/url.html)');

— Poussiéreux
source

3

Essayez de modifier l'attribut "style":

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');

— appcropolis
source

1

remplacera tous les autres styles. Non recommandé

— melvin

2

L'interpolation de cordes à la rescousse.

let imageUrl = 'imageurl.png';
$('myOjbect').css('background-image', `url(${imageUrl})`);

— Sushanth -
source

1

Le problème que je rencontrais, c'est que je continuais à ajouter un point-virgule ;à la fin de la url()valeur, ce qui empêchait le code de fonctionner.

CODE NON FONCTIONNANT:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg);');

CODE DE TRAVAIL:

$('#image_element').css('background-image', 'url(http://example.com/img.jpg)');

Notez le point-virgule omis ;à la fin dans le code de travail. Je ne connaissais tout simplement pas la syntaxe correcte, et il est vraiment difficile de la remarquer. J'espère que cela aide quelqu'un d'autre dans le même bateau.

— Prid
source

0

N'oubliez pas que la fonction jQuery css permet de passer des objets, ce qui vous permet de définir plusieurs éléments en même temps. Le code répondu ressemblerait alors à ceci:

$(this).css({'background-image':'url(' + imageUrl + ')'})

— Antony
source

-3

$ ('myObject'). css ({'background-image': 'url (imgUrl)',});

— wahaj
source

Cela ne fonctionnera pas car l'URL est placée entre guillemets simples.

— Sal