Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretch a background image in CSS [duplicate]

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

like image 626
Rafay Zia Mir Avatar asked Nov 30 '22 05:11

Rafay Zia Mir


2 Answers

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.

like image 143
Michal Klouda Avatar answered Dec 04 '22 10:12

Michal Klouda


I think this is what you are looking for:

background-size: 100%;
like image 23
Tim Withers Avatar answered Dec 04 '22 10:12

Tim Withers