How to remove div backgrounds?

Tags: asp.net,html,css

Problem :

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 ?

---

Solution :

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";