Content place holder background image

Question

It is possible to set a background image for content place holder? At the moment , i can display a background image for the whole page but the content place holder is blocking most of the picture so i would like to set a background image for the content place holder instead ( most of the content are in the holder ) .

Here are my code to display the image in background but i got no idea how to place it in content place holder in ASP.NET :

  protected void dropListActivity_SelectedIndexChanged(object sender, EventArgs e)
    {

        if (dropListActivity.SelectedItem.Text == "GrassHopper and Ants")
        {
            PageBody.Attributes.Add("style", "background:url(Images/background/ant-and-grasshopper.jpg) no-repeat;");
            Session["Background"] = "background:url(Images/background/ant-and-grasshopper.jpg);";

        }

        if (dropListActivity.SelectedItem.Text == "Food Fit For A King")
        {
            PageBody.Attributes.Add("style", "background:url(Images/background/King.jpg) no-repeat;");
            Session["Background"] = "background:url(Images/background/King.jpg);";

        }
    }

and in my html side , i just add a body id = "PageBody" and it does the job . but how do i do that in content place holder? i am a newbie in programming as well as CSS or Html .

Answer 1

Content place holder only render it's content, there is no html element that is rendered if it is empty, you can put a div inside it and it will render.

And concerning your solution - you are going to the server to change a background image, please don't.
you should do it in JavaScript + CSS use jQuery to listen to the change event of the select element and then change the background according to it.

 in your css:
 .grassHopper{background:url(Images/background/ant-and-grasshopper.jpg) no-repeat;}
 .foodFit{background:url(Images/background/King.jpg) no-repeat;}
 in your JS
 $(document).ready(function(){
   $("#dropListActivity").change(function(event){
      var jqBody = $("body");
      jqBody.removeClass("grassHopper foodFit");
      if($(this).find("option[selected]").text() === "GrassHopper and Ants")
      {
        jqBody.addClass("grassHopper");
      }
      ...
   }).change();//also trigger so the bg will be updated according to the selected value at the select from the server
 });

And last thing - if you are only starting with programming on the .net stack - i suggest useing asp.net MVC and ont webForms