响应式 css 背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12609110/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive css background images
提问by jochemke
I have a website (g-floors.eu) and I want to make the background (in css I have defined a bg-image for the content) also responsive. Unfortunately I really don't have any idea on how to do this except for one thing that I can think of but it's quite a workaround. Creating multiple images and then using css screen size to change the images but I wanna know if there is a more practical way in order to achieve this.
我有一个网站 (g-floors.eu)，我想让背景（在 css 中我为内容定义了一个 bg-image）也响应。不幸的是，除了我能想到的一件事之外，我真的不知道如何做到这一点，但这是一个很好的解决方法。创建多个图像，然后使用 css 屏幕大小来更改图像，但我想知道是否有更实用的方法来实现这一点。
Basically what I wanna achieve is that the image (with the watermark 'G') automatically resizes without displaying less of the image. If it's possible of course
基本上我想要实现的是图像（带有水印“G”）自动调整大小而不显示更少的图像。如果可能的话当然
link: g-floors.eu
链接：g-floors.eu
Code I have so far (content part)
到目前为止我拥有的代码（内容部分）
#content {
background-image: url('../images/bg.png');
background-repeat: no-repeat;
position: relative;
width: 85%;
height: 610px;
margin-left: auto;
margin-right: auto;
}
回答by Andrei Volgin
If you want the same image to scale based on the size of the browser window:
如果您希望根据浏览器窗口的大小缩放相同的图像：
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Do not set width, height, or margins.
不要设置宽度、高度或边距。
EDIT: The previous line about not setting width, height or margin refers to OP's original question about scaling with the window size. In other use cases, you may want to set width/height/margins if necessary.
编辑：关于不设置宽度、高度或边距的上一行是指 OP 关于随窗口大小缩放的原始问题。在其他用例中，如有必要，您可能希望设置宽度/高度/边距。
回答by Pnsadeghy
by this code your background image go center and fix it size whatever your div size change , good for small , big , normal sizes , best for all , i use it for my projects where my background size or div size can change
通过此代码，您的背景图像居中并修复它的大小，无论您的 div 大小如何变化，适用于小、大、正常尺寸，最适合所有人，我将它用于我的背景大小或 div 大小可以改变的项目
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
回答by Ashok Dey
Try this :
尝试这个 ：
background-image: url(_images/bg.png);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: cover;
回答by Timothy Miller
CSS:
CSS：
background-size: 100%;
That should do the trick! :)
这应该够了吧！:)
回答by lanan
Here is sass mixin for responsive background image that I use. It works for any blockelement. Of course the same can work in plain CSS you will just have to calculate paddingmanually.
这是我使用的响应式背景图像的 sass mixin。它适用于任何block元素。当然，同样可以在纯 CSS 中工作，您只需要padding手动计算即可。
@mixin responsive-bg-image($image-width, $image-height) {
background-size: 100%;
height: 0;
padding-bottom: percentage($image-height / $image-width);
display: block;
}
.my-element {
background: url("images/my-image.png") no-repeat;
// substitute for your image dimensions
@include responsive-bg-image(204, 81);
}
Example http://jsfiddle.net/XbEdW/1/
回答by Omar
This is an easy one =)
这是一个简单的=）
body {
background-image: url(http://domains.com/photo.jpeg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
Take a look at the jsFiddle demo
看一下jsFiddle 演示
回答by Piyush
回答by Holly
I used
我用了
#content {
width: 100%;
height: 500px;
background-size: cover;
background-position: center top;
}
which worked really well.
效果很好。
回答by amit bende
#container {
background-image: url("../images/layout/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100vh;
margin: 3px auto 0;
position: relative;
}
回答by user956584
Responsive website by add padding into bottom image height/width x 100 = padding-bottom %:
通过在底部图像高度/宽度 x 100 = padding-bottom % 中添加填充来响应网站：
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/
More complicated method:
更复杂的方法：
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
Try to resize background eq Firefox Ctrl + M to see magic nice script i think best one:
尝试调整背景 eq Firefox Ctrl + M 以查看我认为最好的神奇脚本：
http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content
http://www.minimit.com/demos/fullscreen-backgrounds-with-central-content
