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.
I think this is what you are looking for:
background-size: 100%;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With