Configuración de imagen de fondo usando la propiedad jQuery CSS

379

Tengo una URL de imagen en una imageUrlvariable y estoy tratando de configurarla como estilo CSS, usando jQuery:

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

Esto parece no funcionar, ya que:

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

vuelve none.

¿Alguna idea de lo que estoy haciendo mal?

javascript jquery css Blankman
fuente
1
¿Cuál es exactamente el problema? ¿Jquery arroja un error?
Mike_G
No, no lo está configurando correctamente. Lo estoy registrando y simplemente no está cambiando.
Blankman
2
La primera vez que jQuery no intenta adivinar a qué se refería el usuario.
gblazex

Respuestas:

926

Probablemente desee esto (para que sea como una declaración de imagen de fondo CSS normal):

$('myObject').css('background-image', 'url(' + imageUrl + ')');
Greg
fuente
Lo estaba haciendo de esta manera, pero un espacio entre 'url' y los paréntesis izquierdos estaba causando que mi código fallara. Copie / pegue el suyo y se dio cuenta del problema. ¡Gracias!
pmartin
Utilizo su código en este script pero me da background-image: url ((desconocido)); Este es mi 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 + ')');}); ¿Alguna idea de por qué?
Gaston Coroleu
71

Deberá incluir comillas dobles (") antes y después de imageUrl de esta manera:

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

De esta manera, si la imagen tiene espacios, se establecerá como una propiedad.

Arosboro
fuente
66
en ese caso, debería ser$('myObject').css('background-image', 'url(' + encodeURIComponent(imageUrl) + ')');
Arosboro
44
Las cotizaciones no son necesarias: stackoverflow.com/questions/2168855/css-url-are-quotes-needed
nulability
Esto lo resolvió para mí. Necesitaba tener las comillas dobles. Los nombres de mis imágenes contienen espacios. De lo contrario, no ocurriría nada. Podría obtener algo como $('.myObject').css('background-color', 'green'); trabajar, pero no cambiar la imagen sin comillas dobles. ¡Gracias!
Ghost Echo
1
encodeURIComponentno funcionará si parte de su URL ya contenía caracteres escapados de URL. Sin embargo, debe escapar del posible personaje de comillas dobles en imageUrl:$('myObject').css('background-image', 'url("' + imageUrl.replace(/"/g, '\\"') + '")');
Nicolas Garnier
Por $('#elem').css('background-image', 'url(' + encodeURIComponent(thumbData.url) + ')');background-image: url("%2Ffiles%2Fusers%2Fthumbs%2F36206608-hd-pics-3.jpg");
cierto
47

Alternativamente a lo que los otros sugieren correctamente, me resulta más fácil alternar las clases de CSS, en lugar de las configuraciones individuales de CSS (especialmente las URL de imagen de fondo). Por ejemplo:

// 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
fuente
2
Esta es una forma mucho mejor de hacer las cosas porque le permite usar un preprocesador CSS.
calumbrodie
Esto es genial, mucho mejor que la solución más directa.
Magicode
Sin embargo, esto va a cargar ambas imágenes.
sheriffderek
¿Es esta realmente una solución recomendada? Parece que esto requiere innecesariamente más información, por ejemplo, en caso de que haya una tercera imagen de fondo posible, deberá eliminar todas las demás imágenes de fondo o, alternativamente, realizar un seguimiento de la imagen "actual". Y también tener detalles de configuración, como estos URI en los archivos .css me vuelve loco. : smiley: ¡Tengo que buscar todo el código!
Anne van Rossum
Usar clases como esta también es mi preferencia, ya que le permite mantener una separación limpia entre el código y el estilo. Luego puedo cambiar todas mis imágenes y animaciones en el CSS (a través de selectores de medios y demás) sin perder el tiempo con el código. ¡No tiene que buscar en todo el código si mantiene sus imágenes FUERA del código!
Evan Langlois
14

Aquí está mi código:

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

Disfruta amigo

Apo
fuente
13

Además de las otras respuestas, también puede usar "fondo". Esto es particularmente útil cuando desea establecer otras propiedades relacionadas con la forma en que el fondo usa la imagen, como:

$("myObject").css("background", "transparent url('"+imageURL+"') no-repeat right top");
Matt Parkins
fuente
Esta respuesta tuvo más sentido cuando pensé que el operador original había usado background, no background-image. He modificado mi respuesta para que tenga más sentido, y de todos modos lo dejaré aquí para la posteridad.
Matt Parkins
6

Para aquellos que usan una URL real y no una variable:

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

Intente modificar el atributo "estilo":

$('myObject').attr('style', 'background-image: url("' + imageUrl +'")');
appropropolis
fuente
1
reemplazará todos los demás estilos. No recomendado
melvin
2

Cadena de interpolación al rescate.

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

El problema que tenía es que seguía agregando un punto y coma ;al final del url()valor, lo que impedía que el código funcionara.

CÓDIGO NO FUNCIONA:

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

CÓDIGO DE TRABAJO:

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

Observe el punto y coma omitido ;al final del código de trabajo. Simplemente no sabía la sintaxis correcta, y es realmente difícil notarlo. Esperemos que esto ayude a alguien más en el mismo barco.

Prid
fuente
0

No olvide que la función jQuery css permite que se pasen objetos, lo que le permite configurar varios elementos al mismo tiempo. El código respondido se vería así:

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

Antonio
fuente
-3 
$ ('myObject'). css ({'background-image': 'url (imgUrl)',});
wahaj
fuente
Esto no funcionará porque la url está encerrada entre comillas simples.
Sal