Dynamic background-image on body (ASP.NET)

Question

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" ? :-)

Adding a `style="background-image: url()"` (or a CSS class to that effect) to the body sounds like a fine solution to me. What reasons speak against it? — Pekka, Feb 21 '11 at 12:41
@Pekka - Out of curiosity, how would something like this work with a class instead of an inline style declaration ? How would the image be dynamic if we choose to use a class ? — MEM, Jul 11 '12 at 10:59

Jon P · Accepted Answer · 2011-02-21T22:20:20.020

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.

Meligy · Answer 2 · 2013-06-27T02:12:45.903

One way you can do it is have a property like this (a method will also work):

    protected string BodyBackgroundImageUrl
    {
        get
        {
            // I just chose random pic
            return "http://www.google.com/images/logos/ps_logo2.png";
        }
    }

You don't have to set the value like this, you can fill it later from page Init event.

Then in the body you can do something like:

    <body style='background:url(<%= BodyBackgroundImageUrl %>) no-repeat;'>

The no-repeat is just to show you can write whatever you want all around.

Of course you can even have more control, and different ways of things:

    public string GetBodyStyle()
    {
        // Get the picture somehow dynamically
        string bodyBackgroundImageUrl = GetBodyBackgroundImageUrl();

        // You can use StringBuilder or so, not the main point
        var styles = "";

        styles += string.Format("background:url({0}) no-repeat;", bodyBackgroundImageUrl);

        // ... Add some extra styles if you want ...

        return styles;
    }

And then your Body tag will look like:

   <body style='<%= GetBodyStyle() %>'>

...

Also, you can always use a hidden field that you assign the value from the page, and then in browser set the background URL to that hidden field by JavaScript.

Example (using jQuery, but you don't have to) :

$(function() {
   // ASP.NET will fill the ID, then # with ID will show to JS as one JS string
   var myHiddenField = $('#<%= myServerSideHiddenField.ClientID %>');
   var bodyBackground = "url(" + myHiddenField.val() + ")";
   document.body.css("background" , bodyBackground);
});

score 2 · Answer 3 · answered Feb 21 '11 at 12:51

2

This is how we have been doing it.

<body runat="server" id="PageBody">

code behind

PageBody.Style.Add("background-color", "" + returncolor + "");

answered Feb 21 '11 at 12:51

Picflight

3,832
13
61
90

score 1 · Answer 4 · answered Jun 11 '15 at 09:34

I am using a master page, and taking hints and tips from a few suggestions, I have come up with this as the best, and fullest, solution so far:

Please add this Using:

using System.Web.UI.HtmlControls;

Inside the MasterPage:

<body runat="server" id="masterPageBody">

In any code-behind page function (for example, "Page_Load"):

HtmlControl masterPageBody =(HtmlControl)Master.FindControl("masterPageBody");
masterPageBody.Style.Remove("background-image");
masterPageBody.Style.Add("background-image", "/images/blah.jpg");

score 0 · Answer 5 · answered Jul 02 '13 at 14:16

        serverPath = Request.PhysicalApplicationPath;
        string chosenMap = dropdownlistMap.SelectedItem.Text;

        Bitmap bm = new Bitmap(serverPath + chosenMap);
        int imageWidth = bm.Width;
        int imageHeight = bm.Height;
        bm.Dispose();

        FileInfo fi = new FileInfo(chosenMap);
        string imageSrc = "~/" + fi.Name;

        imgPanel.BackImageUrl = imageSrc;
        imgPanel.Width = imageWidth + 4;
        imgPanel.Height = imageHeight + 4;
        imgPanel.BorderColor = Color.Yellow;
        imgPanel.BorderStyle = BorderStyle.Groove;
        imgPanel.BorderWidth = 2;

score 0 · Answer 6 · edited Apr 04 '18 at 06:06

Seriously -- this doesn't have to be this hard. I just implemented this for something I am designing... I realize this thread is probably dead but hey -- I came up with a better solution IMO.

ASPX VB:

 ClientScript.RegisterStartupScript(Me.[GetType](), "Background",
"document.body.style.backgroundImage = " & Chr(34) &
"url('128-700.jpg')" & Chr(34) & ";", True)

That's it... I call it straight from the VB code part. I'm still learning but I know that after searching around and trying different things -- this was as straight forward as possible.

The trick is -- this code utilizes a call for Java to change the background versus modifying the CSS.

Dynamic background-image on body (ASP.NET)

6 Answers6

Linked