0

I'm using a full sized background via:

background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Q1. When my page expands to show extra content, the bg jumps to get larger, is there a way to stop this?

Q2. What would be a good work around or fallback for cover bg's for IE7-8?

Thanks

4

1 回答 1

1

如果我错了，请纠正我，但我假设您正试图阻止背景图像垂直扩展/移动，对吗？如果是这样的话，那么也许这个 CSS 会做你想做的事：

    background-image: url('/static/img/background/my_bg.jpg');
    background-size: auto 1080px;
    background-position: center top;
    background-repeat: no-repeat;

背景垂直大小设置为 1080 像素，但您可以将其设置为您想要的任何值，因此它是一个静态值（宽度的 auto* 值只会保留您的图像纵横比）。这应该可以防止图片缩放。使用 Center Top 而不是 Center Center 进行定位应该使您的图片锚定在顶部中间，这样如果页面垂直扩展，它就不会向下移动。

如果您希望图像缩小但只放大到某个点，我认为您需要使用 Div 标签来包含整个页面并将图像设置为 Div 的背景。从那里您应该能够将图像设置为缩放并设置最大宽度和最大高度。

如果这没有帮助，将不胜感激有关您尝试实现的效果的更多信息。:)

于 2013-05-05T18:27:12.013 回答