拉伸在CSS背景圖像

可能重複：
Stretch and Scale a CSS image Background - With CSS only 拉伸在CSS背景圖像

初學者問題：這可能是一個基本的問題，我可能會錯過一些基本概念。我已經看到這個問題，但我認爲這不是我的問題。我想在CSS中展開我的背景圖片。這裏是我的CSS代碼
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; 
}

這裏是我的HTML代碼
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>

所以我想在page.Ignore設置背景圖片內部代碼。請幫助我拉伸圖像，因爲我的Style builder沒有顯示任何有關拉伸圖像的屬性。上面提到的鏈接是在Html中擴展圖像，但我想在CSS中完成。
編輯： 並請告訴我如何包括在Visual Studio CSS3，因爲我的CSS編輯器顯示高達CSS2.1
感謝

來源

2012-09-08 Rafay Zia Mir

只是爲了別人會發現它，如果他們得到同樣的問題。因爲我的問題的某些部分沒有被SO用戶回答。我已經搜索過它並找到答案，所以我正在回答那部分
這是任何人都可以下載CSS3 intellisense模式的鏈接。
http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
安裝完成後，Visual Studio將在CSS編輯器中顯示CSS3，您可以從那裏選擇它。然後使用屬性

background-size: 100%;

來源

2012-09-08 17:09:39

我認爲這是你在找什麼：

background-size: 100%;

來源

2012-09-08 15:53:27

是的，我想這樣做，但編譯器intellicense的編譯器不顯示。我認爲這是CSS3的一個屬性，但我不能在項目中包含CSS3，因爲我第一次使用CSS3 –

用於在背景圖像上拉伸圖像應該是100％「在您的CSS中我們把px更改爲％也添加背景大小= 100％您的CSS變爲

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

}

來源

2012-09-08 15:54:54 Kaushal

在CSS3，你可以簡單地使用background-size: cover記錄here。

蓋：縮放圖像，同時保持其固有的縱橫比（如果有的話），以最小的尺寸，使得它的寬度和高度兩者都可以完全覆蓋背景定位區域。

否則請參閱此answer。

來源

2012-09-08 15:55:03

你可以使用背景尺寸：

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

這裏是它的一個演示：

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

background-size:100%;

來源

2012-09-08 15:55:35 luke

用途：

background: url(yourimage.jpg) no-repeat; 
  background-size: 100%;

這應該工作。

來源

2012-09-08 15:55:46 rgamber

我會使用100％的寬度和高度。

來源

2012-09-08 15:58:31 abDesigns

拉伸在CSS背景圖像

回答

相關問題