Definindo imagem de fundo usando a propriedade CSS jQuery

379

Eu tenho um URL de imagem em uma imageUrlvariável e estou tentando defini-lo como estilo CSS, usando jQuery:

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

Isso parece não estar funcionando, como:

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

retorna none.

Alguma idéia, o que estou fazendo de errado?

javascript jquery css

— Blankman
fonte

11

Qual é exatamente o problema? Jquery está lançando um erro?

— 23410 Mike_G

Não, não está configurando corretamente. Estou registrando e simplesmente não está mudando.

— 194 Blankman

2

A primeira vez que o jQuery não tenta adivinhar o que o usuário quis dizer.

— Gblazex

926

Você provavelmente deseja isso (para torná-lo como uma declaração de imagem de plano de fundo CSS normal):

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

— Greg
fonte

Eu estava fazendo isso dessa maneira - mas um espaço entre 'url' e os parênteses à esquerda estava causando falha no meu código. Copiei / colei o seu e percebi o problema. Obrigado!

— pmartin

Eu estou usando o seu código neste script, mas receba uma imagem de fundo: url ((desconhecido)); Este é o meu 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 ('imagem de fundo', 'url (' + bg_img + ')');}); Alguma idéia do porquê?

— Gaston Coroleu 01/10/1918

71

Você deseja incluir aspas duplas (") antes e depois do imageUrl, assim:

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

Dessa forma, se a imagem tiver espaços, ela ainda será definida como uma propriedade.

— Arosboro
fonte

6

nesse caso, deveria ser$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');

— Arosboro 2/13/13

4

Aspas não são necessárias: stackoverflow.com/questions/2168855/css-url-are-quotes-needed

— nullability

Isso resolveu para mim. Eu precisava ter aspas duplas. Os nomes das minhas imagens contêm espaços. Caso contrário, nada iria ocorrer. Eu poderia conseguir algo como $('.myObject').css('background-color', 'green'); trabalhar, mas não alterar a imagem sem aspas duplas. Obrigado!

— Ghost Echo

11

encodeURIComponentnão funcionará se parte do seu URL já contiver caracteres de escape de URL. Você deve escapar potencial caractere de aspas duplas em imageUrl embora:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');

— Nicolas Garnier

A propósito, fazendo $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');me deubackground-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");

— Daerik

47

Como alternativa ao que os outros estão sugerindo corretamente, acho mais fácil alternar classes CSS, em vez de configurações CSS individuais (especialmente URLs de imagem de plano de fundo). Por exemplo:

// 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
fonte

2

Essa é uma maneira muito melhor de fazer as coisas, pois permite usar um pré-processador de css.

— Calumbrodie 17/08/2012

Isso é ótimo, muito melhor do que a solução mais direta.

— precisa saber é o seguinte

Isso vai carregar as duas imagens.

— Sheriffderek

Esta é realmente uma solução recomendada? Parece que isso requer desnecessariamente mais informações, por exemplo, caso exista uma terceira imagem de fundo possível, você precisará remover todas as outras imagens de fundo ou, alternativamente, acompanhar a imagem "atual". E também ter detalhes de configuração, como esses URIs nos arquivos .css, me deixa louco. : smiley: Eu tenho que pesquisar em todo o código!

— Anne van Rossum

Usar classes como essa também é minha preferência, pois permite manter uma separação limpa entre código e estilo. Posso mudar todas as minhas imagens e animações no css (via seletores de mídia e outras) sem mexer no código. Você não precisa pesquisar em todo o código se mantiver suas imagens fora do código!

— Evan Langlois

14

Aqui está o meu código:

$ ('body'). css ('imagem de fundo', 'url ("/ apo / 1.jpg")');

Aproveite amigo

— Apo
fonte

13

Além das outras respostas, você também pode usar "fundo". Isso é particularmente útil quando você deseja definir outras propriedades relacionadas à maneira como a imagem é usada pelo plano de fundo, como:

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

— Matt Parkins
fonte

Essa resposta fez mais sentido quando pensei que a operação original usava o fundo, não a imagem de fundo. Modifiquei minha resposta para fazer mais sentido, e deixarei isso aqui para a posteridade de qualquer maneira.

— Matt Parkins

6

Para aqueles que usam um URL real e não uma variável:

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

— Poeirento
fonte

3

Tente modificar o atributo "style":

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

— appcropolis
fonte

11

substituirá todos os outros estilos. Não recomendado

— melvin 23/03

2

Interpolação de string para o resgate.

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

— Sushanth -
fonte

1

O problema que eu estava tendo é que continuava adicionando um ponto-e-vírgula ;no final do url()valor, o que impedia o funcionamento do código.

CÓDIGO NÃO FUNCIONANDO:

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

CÓDIGO DE TRABALHO:

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

Observe o ponto e vírgula omitido ;no final do código de trabalho. Eu simplesmente não conhecia a sintaxe correta e é realmente difícil perceber. Espero que isso ajude alguém no mesmo barco.

— Prid
fonte

0

Não esqueça que a função css do jQuery permite que objetos sejam transmitidos, o que permite definir vários itens ao mesmo tempo. O código respondido ficaria assim:

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

— Antony
fonte

-3

$ ('myObject'). css ({'imagem de fundo': 'url (imgUrl)',});

— wahaj
fonte

Isso não funcionará porque o URL está entre aspas simples.

— Sal