How to change Web Page Background Image from FileUpload Control


Overview

This topic will guide you on how to change the background image of any asp.net web page by using a file upload control.

Steps

1. Initially you have to make one new folder named "pics" in solution explorer and put any image there and rename the image to "back.jpeg".

2. Go to the HTML SOURCE (Default.aspx) page and add the following lines of code to the <body> tag.

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

3. In the Code-Behind file (Default.aspx.cs) declare a static string variable under the class Default.

public partial class _Default : System.Web.UI.Page

{
    static string st;

4. In page load initialize the string to the name and location of the image of in the folder("pics") that we added in step

protected void Page_Load(object sender, EventArgs e)
    {
       st = Server.MapPath("~/pics/") + "back.jpeg";
    }

5. Now In the Desighn view of the page drag one button and one fileupload control.

6. Under the button click event write the following lines of code to overwrite the existing image to the image being uploaded.

protected void Button1_Click(object sender, EventArgs e)

    {
        File.Copy(FileUpload1.PostedFile.FileName.ToString(), st, true);
        bb.Attributes.Add("BackGround", st);
   }

That's it. Now your page background image will be set to the new image.

Summary

This article tells you on how to change the background image of an ASP.net web page to any image by using a fileupload control.