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

回答1:

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.

回答2:

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

回答3:

This is how we have been doing it.

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

code behind

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

回答4:

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

回答5:

        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;

回答6:

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.

来源：https://stackoverflow.com/questions/5066031/dynamic-background-image-on-body-asp-net

标签

ASP.NET

html

css

dynamic-data