0

I have a div with a background image with an image nested inside of it. I am using a CSS class to set the background and positioning properties of that div. I would like for the user to control which background they see via a query string. The code behind would basically change (switch) the class of that div so that the background image would change based on the string typed in the address box.

Here is the HTML with the div and Css.

.background1 {
            background-image: url(../Background1.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            height: 100vh;
            width: 100%;
            max-height: 100vh;
            max-width: 100vw;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
.background2 {
            background-image: url(../Background2.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            height: 100vh;
            width: 100%;
            max-height: 100vh;
            max-width: 100vw;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }
.background3 {
            background-image: url(../Background3.png);
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center center;
            height: 100vh;
            width: 100%;
            max-height: 100vh;
            max-width: 100vw;
            margin-left: auto;
            margin-right: auto;
            display: block;
        }


<div id="div" class="background1" runat="server"></div>

Here is what I (currently) have in the code behind.

if (Request["nobg"] != null)
{
    div.Style.Add("display", "none");
}

So in the end I would like the user to switch between classes by typing in something like "?Background3" after the url to change the class (to see a different background) But I am sort of stuck as I really do not know if what I would like to do (switch between the background classes via query-string) is possible. Any help would be great. Thanks.

mason
  • 31,774
  • 10
  • 77
  • 121
Bastian
  • 51
  • 10
  • 1
    Is there any particular reason you want to do this on the server side, rather than doing it on the client? I don't see why the server needs to be involved. – mason Oct 13 '15 at 17:23
  • 1
    I believe mason is suggesting something like this. http://stackoverflow.com/questions/3452778/jquery-change-class-name – Adam Heeg Oct 13 '15 at 17:24
  • There are a couple reasons, but basically I prefer to do it via the server right now because of how the pages I have now are set up (I am being vague but that is as much as I can disclose at the moment). I am not opposed to any client side suggestions if you have them though. – Bastian Oct 13 '15 at 17:41
  • 1
    On a server side simple `div.Attributes["class"] = Request["bg"];` should get you going, as long as you have `?bg=Background1`. You cannot have just `?Background1` as this is an invalid query string – Andrei Oct 13 '15 at 17:49
  • Thanks guys, I found a way. I appreciate the feedback. – Bastian Oct 13 '15 at 18:23

0 Answers0