asp.nethtmlcssdynamic-data

Dynamic background-image on body (ASP.NET)


I have a situation where I have ~10-20 different background images in a folder. When my site loads I need to choose a specific one of these images based upon some values from the database.

I thought about using runat=server on the body tag, and then adding the attributes dynamically on page_load, but everywhere I have read that suggestion people say it is a really bad idea... Also, I tried it, and it didn't work (however didn't debug it too much).

How would one do this "the right way" ? :-)


Solution

  • You Can Either dynamically add it via a Generic HTML control:

       using System.Web.UI.HtmlControls;
    
    
        protected override void OnInit(EventArgs e)
        {
            // Define an Literal control.
            HtmlGenericControl css = new HtmlGenericControl();
            css.TagName = "style";
            css.Attributes.Add("type", "text/css");
    
            string imageURL = string.Empty;
    
            //Logic to determin imageURL goes here
    
            //Update Tag
            css.InnerHtml = @"body{background-image: url(" + imageURL + ");}";
    
    
            // Add the Tag to the Head section of the page.
            Page.Header.Controls.Add(css);
    
            base.OnInit(e);        } 
    

    The other option is to have a publically exposed property from the code-behind

    E.g.

    public string backgroundImage = "defaultImage.png";
    

    Update this in page init or onload events.

    And reference it in the aspx file either in the head:

    <style type="text/css">
        body 
        { 
           background-image:url(<%=backgroundImage%>);
        }
     </style>
    

    or as an attribute of the body tag

     <body style="background-image: url(<%= backgroundImage %>)">
    

    Either of these should be able to help you out.