在CSS中拉伸背景图片

Question

可能重复的问题：
使用CSS仅拉伸和缩放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>

我想在页面上设置背景图片。请忽略内部代码。请帮我拉伸图片，因为我的“样式生成器”没有显示任何与拉伸图像相关的属性。我提到的链接在HTML中拉伸图像，但我想在CSS中这样做。
编辑: 请告诉我如何在Visual Studio中包含CSS3，因为我的CSS编辑器仅显示CSS2.1。
谢谢

- Rafay Zia Mir

Answer 1

在CSS3中，您可以简单地使用background-size: cover，文档在这里记录。

cover: 缩放图像，同时保留其固有的纵横比（如果有），使其宽度和高度都能完全覆盖背景定位区域。

否则，请参见此答案。

- Michal Klouda

---

你让我开心极了！ - Cheshire Cat

Answer 2

我想这就是你正在寻找的内容：

我认为这就是你需要的:

background-size: 100%;

- Tim Withers

---

是的，我想做这个，但编译器的智能提示没有显示。我认为这是CSS3的属性，但我无法将CSS3包含在项目中，因为我是第一次在上面工作。 - Rafay Zia Mir

Answer 3

你可以使用background-size属性，具体用法请参考以下链接：http://www.w3schools.com/cssref/css3_pr_background-size.asp。这里有一个演示：http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size2。

background-size:100%;

- luke

Answer 4

使用：

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

那应该可以运行。

- rgamber

Answer 5

如需将图像拉伸至背景图像，请将背景图像设置为100%。在您的 CSS 中使用 px 将其更改为 %，同时添加 background-size = 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;

}

- Kaushal

Answer 6

只是为了让其他人在遇到同样的问题时能够找到答案。因为我的问题有一部分没有被 Stack Overflow 的用户回答。我已经搜索并找到了答案，所以我来回答那个部分。
这是一个可以下载 CSS3 智能提示模式的链接。
http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
安装后，Visual Studio 将在 CSS 编辑器中显示 CSS3，您可以从中选择它。然后使用该属性。

background-size: 100%;

- Rafay Zia Mir

---

背景大小：包含； 背景重复：不重复； 更美观吗？ - nobjta_9x_tq

Answer 7

我会使用宽度和高度为100%。

- abDesigns