ASP.NET Background image

Question

I am using VS2005 C#.

I have a .aspx login page and I would like to implement a background image to it. Below is my current page screenshot:

enter image description here

Below is my background code:

    <div align="center" style="background-color: transparent; background-image: url(Images/blue.jpg);">
<asp:login id="Login1" runat="server" font-size="Large" BackColor="#F7F6F3" BorderColor="#E6E2D8" BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana" ForeColor="#333333" DestinationPageUrl="~/Common/Default.aspx" DisplayRememberMe="False" FailureText="Login failed" RememberMeSet="False" Height="224px" Width="384px">
    <TitleTextStyle BackColor="#5D7B9D" Font-Bold="True" Font-Size="0.9em" ForeColor="White" />
    <InstructionTextStyle Font-Italic="True" ForeColor="Black" />
   <TextBoxStyle Font-Size="0.8em" />
    <LoginButtonStyle BackColor="#FFFBFF" BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px"
    Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284775" />
</asp:login>
</div>

I tried to put the <div> tag outside, but the background image just seems stuck with the login control's width height.

May I know how can I extend the image to cover the whole background?

Thank you

Spikeh · Accepted Answer · 2011-12-05 09:54:41Z

8

1) Use a CSS stylesheet - add <link rel="stylesheet" type="text/css" href="styles.css" /> to include it.

2) Apply the background to the body:

body {
    background-image:url('images/background.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

See:

http://www.w3schools.com/css/css_howto.asp

http://www.w3schools.com/cssref/pr_background-position.asp

answered Dec 5, 2011 at 9:54

Spikeh

3,7454 gold badges26 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vano Maisuradze · Accepted Answer · 2011-12-05 09:59:26Z

1

If you want to set image as background for whole page, use this:

body
{
    background-image: url('Image URL');
}

answered Dec 5, 2011 at 9:59

Vano Maisuradze

5,9196 gold badges48 silver badges73 bronze badges

Comments

Satpal · Accepted Answer · 2013-08-16 10:02:56Z

1

write code in body tag like this

<body style="background-image: url('Image URL');" >
</body>

edited Aug 16, 2013 at 10:02

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Aug 16, 2013 at 9:44

Vikash pathak

672 bronze badges

Comments

Michael Gaskill · Accepted Answer · 2016-07-08 21:26:50Z

1

Use this Code in code behind

Div_Card.Style["background-image"] = Page.ResolveUrl(Session["Img_Path"].ToString());

edited Jul 8, 2016 at 21:26

Michael Gaskill

8,06210 gold badges40 silver badges46 bronze badges

answered Jul 8, 2016 at 21:05

user3511084

92 bronze badges

Comments

Roger · Accepted Answer · 2012-06-18 15:01:46Z

0

resize your background image in an image editor to the size you want related to your login box, which should help page loading and preserve image quality...

hard-size your DIV relative to your image

position your asp:login control where needed...

answered Jun 18, 2012 at 15:01

Roger

411 silver badge2 bronze badges

Comments

Aubrey Love · Accepted Answer · 2018-02-27 15:52:07Z

Just a heads up, while some of the answers posted here are correct (in a sense) one thing that you may need to do is go back to the root folder to delve down into the folder holding the image you want to set as the background. In other words, this code is correct in accomplishing your goal:

body {
    background-image:url('images/background.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

But you may also need to add a little more to the code, like this:

body {
    background-image:url('../images/background.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

The difference, as you can see, is that you may need to add “../” in front of the “images/background.png” call. This same rule also applies in HTML5 web pages. So if you are trying the first sample code listed here and you are still not getting the background image, try adding the “../” in front of “images”. Hope this helps .

Jason Aller · Accepted Answer · 2020-06-27 14:20:40Z

0

You can use this if you want to assign a background image on the backend:

divContent.Attributes.Add("style"," background-image:
url('images/icon_stock.gif');");

edited Jun 27, 2020 at 14:20

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered Nov 15, 2018 at 5:50

Isanka Thalagala

1,7513 gold badges20 silver badges44 bronze badges

Comments

Jason Aller · Accepted Answer · 2020-06-27 14:22:53Z

0

body {
    background-image: url('../images/background.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* will auto resize to fill the screen */
}

edited Jun 27, 2020 at 14:22

Jason Aller

3,66028 gold badges43 silver badges40 bronze badges

answered Jun 27, 2020 at 13:04

Leonel Gonzalez

1397 bronze badges

2 Comments

Jason Aller Over a year ago

When adding an answer to an eight year old question with seven existing answers it is very important to point out what new aspect of the question your answer addresses. Code only answers can almost always be improved by adding some explanation of how and why they work. In this case be sure to point out your use of cover because otherwise this would be a duplicate answer.

Leonel Gonzalez Over a year ago

/* will auto resize to fill the screen */ <-- that's why I added this line.

Collectives™ on Stack Overflow

ASP.NET Background image

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related