How to Set and Change common Background to website using Css

Hello

Friends

Today

I am going to show how you can upload an image using File upload control and use as website background. In this article, I am going to show you following things.

•       How you can upload a file using file upload control.
•       How you can put check on type of file uploaded, size of file.
•       Rename file while uploading.
•       Use this upload image as website background that will change if image changes.

So let us start

Step 1: Create a new web page.

Step2: Drag and drop File Upload Control from toolbox

Design page coding will look like this

<asp:FileUpload id="FileUploadControl" runat="server" />

    <asp:Button runat="server" id="UploadButton" text="Upload" onclick="UploadButton_Click" />

    <br /><br />

    <asp:Label runat="server" id="StatusLabel" text="Upload status: " />

        <asp:Button ID="Button1" runat="server" Text="Button" />

Step3: now on code behind write below code

  protected void UploadButton_Click(object sender, EventArgs e)

    {

        if (FileUploadControl.HasFile)

        {

            try

            {     // check file extension on jpeg file type are allowed

                if (FileUploadControl.PostedFile.ContentType == "image/jpeg")

                {

                    // used to get extension of file

                    string extension = Path.GetExtension(FileUploadControl.PostedFile.FileName);

                    // reaname uplaoded image to background

                    string filename = "background";

                    // save file to image folder

                    FileUploadControl.SaveAs(Server.MapPath("~/") + filename + extension);

                    StatusLabel.Text = "Upload status: File uploaded!";

                }

                else

                    StatusLabel.Text = "Upload status: Only JPEG files are accepted!";

            }

            catch (Exception ex)

            {

                StatusLabel.Text = "Upload status: The file could not be uploaded. The following error occured: " + ex.Message;

            }

        }

    }

  To rename a file while uploading you need to know extension of file for that we are using

   

             Path.GetExtension(FileUploadControl.PostedFile.FileName)

Step4: I have created a simple css class that will set uploaded image as webpage background.

You can View Online Demo at this link VIEW DEMO

You can download code from this website CODE