How can I hide a div using visible property even it has a background

I have the following div:

<div visible="fa开发者_运维问答lse" 
     style="background-image:url('../Contents/Images/item-background-selected.png'); width:113px; height:58px; background-repeat: no-repeat; position: absolute;"  />
<div>

It's still visible in spite of the visible property is set to false. but when I remove the background-image from the style it's hidden.

How can I hide it with keeping its background?

Thanks in advance.

 visible="false" 

is a server control property, unless the div has

 runat="server" 

set, it will be ignored, since the browser/client does not know how to handle that.

try CSS instead:

.myDivClass {

  display:none; /** or: visibility:hidden;  which is slightly different **/

  background-image:url('../Contents/Images/item-background-selected.png');
  width:113px; 
  height:58px; 
  background-repeat: 
  no-repeat; 
  position: absolute
}

Give this a go:

<div 
     style="background-image:url('../Contents/Images/item-background-selected.png'); width:113px; height:58px; background-repeat: no-repeat; position: absolute; display:none"  />
<div>

note the 'display:none'

To make it visible again you would have to remove the display:none from the div.

If you want to get to this in jQuery, use show and hide:

https://api.jquery.com/hide/

Example:

$(document).ready(function() {
    $('report').hide(); // no milliseconds provided means it hides immediately
});

function databound(e) {
    var data = e.sender.dataSource;
    if (0 < data.total()) {
        $('report').show(2000); // 2 seconds to open fully
    }
}

Just learning as I go, and sharing what I find.