Question

可能重复：
Stretch and Scale a CSS image Background - With CSS only

初学者问题：这可能是一个基本问题，我可能会遗漏一些基本想法。我已经看到了这个问题，但我认为这不是我的问题。我想在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>

所以我想在页面上设置背景图片。忽略内部代码。请帮助我拉伸图像，因为我的Style builder没有显示任何有关拉伸图像的属性。我提到的上述链接是在Html中扩展图像，但我想在CSS中进行修改请告诉我如何将CSS3包含在visual studio中，因为我的CSS编辑器显示了CSS2.1 感谢

Answer 1

在CSS3中，您只需使用background-size: cover记录的here。

封面：缩放图片，同时保留其固有的宽高比（如果有的话），最小尺寸，使其宽度和高度可以完全覆盖背景定位区域。

否则请参阅此answer。

Answer 2

我认为这就是你要找的东西：

background-size: 100%;

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%;

Answer 4

用于在背景图像上拉伸图像应为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;

}

Answer 5

使用：

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

这应该有效。

Answer 6

只是为了让其他人在遇到同样的问题时会找到它。因为我的问题的某些部分没有得到SO用户的回答。我搜索了它并找到了答案，所以我正在回答那部分这是任何人都可以下载CSS3 intellisense架构的链接 http://visualstudiogallery.msdn.microsoft.com/7211bcac-091b-4a32-be2d-e797be0db210
安装后，Visual Studio将在CSS编辑器中显示CSS3，您可以从那里选择它。然后使用属性

background-size: 100%;

Answer 7

我会使用100％的宽度和高度。

在CSS中拉伸背景图像

7 个答案: