How can I remove a background-image attribute?

This code...

$myDiv = $('#myDiv');
$myDiv.css('background-image', 'none');

will not actually remove the background-image property. It will make jQuery set an inline style of 'background-image:none' to the myDiv element, which may not be what you want.

If you later apply a class to the myDiv element which uses a background image or attempt to use 'background: url('... to set a background image, the inline style will override and the background image will not show.

To remove the property, I would suggest that you just set the 'background-image' value to nothing, then it will disappear from the inline style all together and you can manipulate it much more easily...

if (pansel.val() === "1") {
    $myDiv.css('background-image', 'url(/private_images/guida_check_category.jpg)'); 
} else {
    $myDiv.css('background-color', '#ffffff').css('background-image', ''); 
    //the value will be set to white with the image 'empty', so it will disappear from inline styles
}

$('*').css('background', 'transparent')

see: Remove background color/images for all elements with jQuery


Try this:

if (pansel.val() == "1") 
     $("#myDiv").css('background-image', 'url(/private_images/guida_check_category.jpg)'); 
else {
     $("#myDiv").css({ 'background-color': '#ffffff' });
     $("#myDiv").css('background-image', 'none');
}

background:0 will remove the entire background css

Tags:

Css

Jquery