Dynamic background-image on body (ASP.NET)

Question

Dynamic background-image on body (ASP.NET)

35.5k Views Asked by Lars Holdgaard At 03 April 2025 at 21:24

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

Original Q&A

There are 6 best solutions below

Dave On 11 June 2015 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");

Meligy On 21 February 2011 at 22:46

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);
});

Picflight On 21 February 2011 at 12:51

This is how we have been doing it.

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

code behind

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

Todd On 21 March 2015 at 02:20

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.

user1994891 On 02 July 2013 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;

**Jon P** · Accepted Answer

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.

Dynamic background-image on body (ASP.NET)

There are 6 best solutions below

Related Questions in ASP.NET

Related Questions in HTML

Related Questions in CSS

Related Questions in DYNAMIC-DATA

Trending Questions

Popular # Hahtags

Popular Questions