How to remove div backgrounds? - asp.net

Question

I have an div element in website markup as follows.
<div id="mainContainer" class="container" runat="server">
I have assigned it a css class as follows.
div#mainContainer.container {
width: 100%;
margin: 0 auto;
margin-top:40px;
height:500px;
background:url("../img/bgimg.png")no-repeat;
}
Now after a button click I want to remove only the background of that div and don't want to tamper any positioning of elements inside it. And btw I am using ASP.net to create this website. How can I do that ?

Answer 1

If you want to achieve this in a server-side event, you'll need to add the runat="server" attribute to your <div> element, and it will need an id attribute. This will make it easy to alter server-side.
You'll need an event-handler method in your code-behind for the button click.
In this event handler, do something like (this assumes the id of your <div> is "container")
container.Style["background"] = String.Empty;
However, in your question, you say you've assigned your element a class. If this is the case, the above might not work. It might be easiest to define another CSS class without this background image rule, and then in the code-behind do this:
container.Attributes["class"] = "newClass";

Answer 2

Now with pure CSS.
.button{
background:green;
}
.background-class{
background:red;
}
.button:active + .background-class{
background:yellow;
}
Check this http://jsfiddle.net/AX8tY/

Answer 3

You will need to use JavaScript (either direct or some JavaScript framework like jQuery) and set the CSS style to
background:none
This means you could alter the style of the specific instance or you could define a new CSS class to apply.

Answer 4

With a simple javascript as:
onclick="javascript:getElementById('div_element_id').style.backgroundImage = '';"
or you may use jQuery's API aswell.

Answer 5

How about something like this:
If your HTML is something like this:
<button class="your-button" />
<div class="background-class">
...
</div>
Then your JS might look something like this (this assumes you're also using jQuery):
$(".your-button").click(function(){
$(".background-class").removeClass("background-class");
});
EDIT : I just saw in your comment that you'd like to use a server-side event. This is a client-side solution.

Answer 6

If you use jQuery you could try something like this :
$('button#idButton').click(function{
$('div#idDiv').css('background':'none')
});
If you don't use jquery you should implement a javascript function on the onClick event, try something like :
<input type="button" name="button1" id="button1" onClick="javascript:deleteBackground()" />
<script>
function deleteBackground(){
Document.getElementById('div_element_id').style.backgroundImage = '';
}
</script>

Answer 7

if you defined a class
.yourclassname {
background: url('..');
}
you can also use the remove class function
$('div').removeClass('yourclassname');

Answer 8

<script language="javascript" type="text/javascript">
function SetClass() {
var ID = document.getElementById('<%=mainContainer.ClientID %>');
ID.className += " ChangeBackground";
return false;
}
</script>
<style type="text/css">
div#mainContainer.container
{
width: 100%;
margin: 0 auto;
margin-top: 40px;
height: 500px;
background: url("wallpaper-1554220.jpg")no-repeat;
}
.ChangeBackground
{
background: none !important;
}
</style>
<asp:Button ID="btn" OnClientClick="return SetClass();" runat="server" Text="Change CSS"/>