locked
Web Page/Form Background(ASP.NET) RRS feed

  • Question

  • Good Day

    I'm trying to create a web page in ASP.NET in C#.

    I would like to know how to set a picture for my website's default background, so that any controls

    or other content throughout the website will be on top of that background.

    And what size should the background pic be set to on the web form?

    Thank You

    • Moved by Andreas Johansson Thursday, September 8, 2011 7:20 PM ASP.NET (From:Visual C# General)
    Wednesday, September 7, 2011 10:04 PM

Answers

All replies

  • Hello,

    This post is more related to CSS : http://www.w3schools.com/css/css_background.asp

    You can set the background image in the body, and configure the background-repeate, position ...

    Kind regards,


    aelassas.free.fr
    • Marked as answer by DextrousDave Thursday, September 8, 2011 6:04 PM
    Wednesday, September 7, 2011 11:15 PM
  • You can use Master page as well.

    http://www.asp.net/master-pages/tutorials

    chanmm


    chanmm
    Thursday, September 8, 2011 7:12 AM
  • You need to set "background-image" using css to set background image. Suppose, all your content in Div. You need to set this attribute in "style" keyword.

    Hope this helps.

     


    Pravin Arote, MCTS - Web Technologies
    • Proposed as answer by Pravin S Arote Thursday, September 8, 2011 7:12 AM
    Thursday, September 8, 2011 7:12 AM
  • Thanks, will give it a try
    Thursday, September 8, 2011 7:30 AM
  • Thanks but how does the code look like? Lets say the image url is: images/rwc.jpg
    Thursday, September 8, 2011 7:50 AM
  • Hi DextrousDave,

    body
    {
    background-image:url('paper.gif');
    }

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

    Have a nice day.


    Alan Chen[MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Thursday, September 8, 2011 1:08 PM
  • Thanks mate.

    I really need your help on another problem I've been battling with the whole day-I'm still a beginner at this.

    I set my background pic, which has a size of 1024*768. Now what syntax do I use so that the background will resize

    automatically to whichever browser/screen is viewing it? I can only find the background-repeat and fix functions,

    do not know how to set it so that it will fit the relative browser size. Here is my code:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="index.aspx.cs" Inherits="index" %>
    <%@ Register src="controls/Header.ascx" tagname="Header" tagprefix="uc1" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Rugby World Cup 2011</title>
        <link href="css/Styles.css" rel="Stylesheet" type="text/css" />
      <style type="text/css">
      body 
      {
             background-image: url(images/grass2.jpg);
             background-color:Black;
             background-repeat:no-repeat;
             background-position:top;
      }
      </style> 
    </head>
        <form id="form1" runat="server">
        <br />
        <uc1:Header ID="Header1" runat="server" />
        </form>
       
    </body>
    </html>

     

    Thanks

    Thursday, September 8, 2011 4:30 PM
  • add in: background-size:100%;
    Thursday, September 8, 2011 4:45 PM
  • ah thanks man, this helps a lot
    Thursday, September 8, 2011 5:18 PM
  • Ok I got my background set now, one more problem, as the page scrolls down vertically,

    ho can I make my backround image repeat in the y-direction without having that repeat line. How do I extend my

    background image vertically so that it will cover the whole scroll area of the page, and my pic is only 1024*768...

    the 768 height stops, and if it repeats vertically it makes a transitional line:

    code for image:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Rugby World Cup 2011</title>
        <link href="css/Styles.css" rel="Stylesheet" type="text/css" />
      <style type="text/css">
      body 
      {
             background-image: url(images/grass2.jpg);
             background-color:Black;
             background-repeat:repeat-y;
             background-position:top;
        
      }
      </style> 
    </head>
        <form id="form1" runat="server">
        <br />
        <br />
        <br />
        <br />
        <br />
        <uc1:Header ID="Header1" runat="server" />
        </form>
       
    </body>
    </html>

    Thanks a lot

    Thursday, September 8, 2011 6:09 PM
  • As I said before, use the background-size:100% to have it fill the whole area without tiling.
    Thursday, September 8, 2011 6:19 PM
  • But I don't want it to fill it horizontally, only vertically, so that the background image extends as the page content goes down(scrolling)
    Thursday, September 8, 2011 7:15 PM
  • But I don't want it to fill it horizontally, only vertically, so that the background image extends as the page content goes down(scrolling)

    background-size:100px 100%;

     

    replace 100px with the width that you want it to be fixed at.

    Friday, September 9, 2011 5:13 PM
  • Nice suggestions.Thanks
    SEO Services Delhi
    Saturday, September 10, 2011 6:02 AM
  • Thanks mate!
    Saturday, September 10, 2011 5:57 PM