如何定位像wanderfly.com这样的背景图片？

嘿家伙。我希望能够定位我的图像背景，类似于 www.wanderfly.com。该页面的源代码显示，他们使用一个隐藏的输入字段：如何定位像wanderfly.com这样的背景图片？

<input value="http://farm1.static.flickr.com/32/35826109_27e678ec45_b.jpg" id="backgroundImage" type="hidden"></input>

我试图寻找的CSS实现“将backgroundImage”，但无法找到它。然而，他们使用的图像是1024：685，但他们想出了如何拉伸以获得更高的分辨率，从而获得整洁的全屏显示效果。

我怎么能做到这一点？

来源

2011-03-07 Tom

在您的html中添加img与id="background"。在你的CSS这样写：#background { width: 100%; position: absolute; top: 0; left: 0; }

演示：http://jsfiddle.net/XW9Pz/1/

来源

2011-03-07 17:06:19 Sotiris

不要忘记z-index：-9999或者你的图像不会像背景图像那样表现 – Alex 2011-03-07 17:12:09

只有当我加入高度：100％时，图像就位。我应该使用高度吗？ – Tom 2011-03-07 17:19:16

@Tom上面只是一个例子。如果“身高：100％”做你想做的事，就用它。 – Sotiris 2011-03-07 17:21:31

他们有一个绝对定位前景图像。

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow-x: hidden; overflow-y: hidden; z-index: -9999; "> 
    <img style="position: relative; width: 969px; height: 643.4765625px; left: 0px; top: -63.23828125px; " src="http://farm3.static.flickr.com/2146/2428825658_c5f07a8f89_b.jpg"> 
</div>

来源

2011-03-07 17:02:52 Quentin

大卫，当我在一个普通的HTML中使用此代码，它只是显示了定期，不拉伸 – Tom 2011-03-07 17:11:37

他们使用JavaScript在动态调整它 - 但我不会建议使用它。前景图像是内容，而不是背景。 – Quentin 2011-03-07 17:39:18

如果你想拥有绵延显示器的100％的宽度和高度，而无需它被压扁或挤压，因为用户监控全屏背景图片是宽屏，请尝试下面的代码。它为我创造了奇迹。

CSS：

img.bg { 
    /* Set rules to fill background */ 
    min-height: 100%; 
    min-width: 1024px; 

    /* Set up proportionate scaling */ 
    width: 100%; 
    height: auto; 

    /* Set up positioning */ 
    position: fixed; 
    top: 0; 
    left: 0 ; 
    z-index: -1; 
} 

@media screen and (max-width: 1024px){ 
    img.bg { 
     left: 50%; 
     margin-left: -512px; 
    } 
}

HTML页面：

<asp:Image ID="imgBG" runat="server" CssClass="bg" ImageUrl="~/Sites/0/PageLayouts/Images/Background.jpg" />

来源

2011-07-13 22:41:54

另外，对于背景图像上方的其他元素，您可能需要添加一个z-index，但我确实为此添加了-1。 – 2011-07-13 22:43:23

附加链接到一些[小提琴]（http://jsfiddle.net/）会更好 – anu 2011-07-14 10:03:09

如何定位像wanderfly.com这样的背景图片？

回答

相关问题