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:
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
The answer is
write code in body tag like this
<body style="background-image: url('Image URL');" >
</body>
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');");
body {
background-image: url('../images/background.jpg');
background-repeat: no-repeat;
background-size: cover; /* will auto resize to fill the screen */
}
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 .
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...
Use this Code in code behind
Div_Card.Style["background-image"] = Page.ResolveUrl(Session["Img_Path"].ToString());
If you want to set image as background for whole page, use this:
body
{
background-image: url('Image URL');
}
Source: Stackoverflow.com