Stretch a background image in CSS

Possible Duplicate:
Stretch and Scale a CSS image Background - With CSS only

A beginner question: This might be a basic question and i could be missing some basic idea. I have seen This question but i think that is not near to my problem. I want to stretch my Background image in CSS. Here is my CSS code
CSS:

.BackgroundColor
{
    background-position: center center;
    margin: 0px 0px 0px 0px;
    background-image: url('Content/Tulips.jpg');//this image i want to stretch
    background-repeat: no-repeat;
    width: 1000px;
    height: 1000px;
    padding: 0px 0px 0px 0px;
}

and here is my HTML code
HTML:

<div class="BackgroundColor">
    <div class="outerMost">
    <div class="heading" id="loginheading">
      Show Login  
    </div>
    <div class="MainSect">
        <div class="Label">
        <asp:Label ID="usernameLabel" runat="server" Text="UserName" ClientIDMode="Static"></asp:Label>
        </div>
        <asp:TextBox ID="UsernameTextBox" runat="server" CssClass="textboxes" ClientIDMode="Static"></asp:TextBox>
        <br />
        <asp:Label ID="PasswordLabel" runat="server" Text="Password" CssClass="Label" ClientIDMode="Static"></asp:Label>
        <asp:TextBox ID="TextBox2" runat="server" CssClass="textboxes"></asp:TextBox>
        <br />
        <asp:Button ID="LoginButton" runat="server" Text="Login"  
            BackColor="#00CCFF" BorderStyle="Solid" CssClass="loginButton" ClientIDMode="Static" />

    </div>
    <br />
    <br />
    <div>
        <asp:Label ID="Label1" runat="server" Text="Date of Birth" CssClass="Label"></asp:Label>
        <asp:TextBox ID="CalenderTextBox" runat="server" ClientIDMode="Static" CssClass="textboxes"></asp:TextBox>
    </div>
    <div id="tabSection">
        <ul>

            <li><a href="#basicInfo">Basic info</a></li>
            <li><a href="#Products">Products</a></li>
            <li><a href="#SavingAccount">Depositer</a></li>
        </ul>
        <div id="basicInfo">
        Basic Info will be mentioned here and bla bla bla
        </div>
        <div id="Products">
        Products and other releases should be mentioned here

        </div>
        <div id="SavingAccount">
        Information about saving account should be mentioned here and bla bla bla
        </div>
    </div>
    </div>
    </div>

So i want to set background image on the page.Ignore the inner code. Kindly help me stretching the image because my Style builder does not show any property regarding stretching the image. The above link i mentioned is stretching the image in Html but i want to do it in CSS.
EDIT: And please tell me how to include CSS3 in visual studio because my CSS editor shows upto CSS2.1
Thanks

---

In CSS3 you can simply use background-size: cover documented here.

cover : Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

Otherwise see this answer.

---

我认为这是你正在寻找的东西：

background-size: 100%;

---

You could use background-size:

http://www.w3schools.com/cssref/css3_pr_background-size.asp

Here is a demo of it:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2

background-size:100%;

链接地址: http://www.djcxy.com/p/89208.html

上一篇: CSS背景图像适合div

下一篇: 在CSS中拉伸背景图像