响应的CSS背景图像

我有一个网站（g-floors.eu），我想做的背景（在CSS中，我已经定义了内容的bg图像）也响应。 不幸的是，我真的不知道如何做到这一点，除了我能想到的一件事情，但这是一个很好的解决办法。 创build多个图像，然后使用CSS的屏幕大小来改变图像，但我想知道是否有一个更实际的方法来实现这一目标。

基本上我想实现的是图像（与水印'G'）自动resize，而不显示较less的图像。 如果有可能的话

链接： g-floors.eu

我到目前为止的代码（内容部分）

#content { background-image: url('..http://img.dovov.combg.png'); background-repeat: no-repeat; position: relative; width: 85%; height: 610px; margin-left: auto; margin-right: auto; } 

Answer 1

如果您想要根据浏览器窗口的大小来缩放相同的图像：

 background-image:url('..http://img.dovov.combg.png'); background-repeat:no-repeat; background-size:contain; background-position:center; 

不要设置宽度，高度或边距。

Answer 2

通过这个代码你的背景图像去中心，并修复它的大小，无论你的div大小的变化，适用于小，大，正常的大小，最好的，我用它为我的背景大小或div大小可以改变的项目

 background-repeat:no-repeat; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-position:center; 

Answer 3

尝试这个 ：

 background-image: url(_images/bg.png); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; background-size: cover; 

Answer 4

CSS：

 background-size: 100%; 

这应该够了吧！ 🙂

Answer 5

这里是我使用的响应式背景图片的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); } 

示例http://jsfiddle.net/XbEdW/1/

Answer 6

这是我得到的最好的方式。

 #content { background-image:url('smiley.gif'); background-repeat:no-repeat; background-size:cover; } 

检查w3schools

更多可用选项

 background-size: auto|length|cover|contain|initial|inherit; 

Answer 7

这是一个容易的=）

 body { background-image: url(http://domains.com/photo.jpeg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } 

看看jsFiddle演示

Answer 8

我用#content { width: 100%; height: 500px; background-size: cover; background-position: center top;} #content { width: 100%; height: 500px; background-size: cover; background-position: center top;} #content { width: 100%; height: 500px; background-size: cover; background-position: center top;}工作得很好。

Answer 9

尝试这个

 ` #container { background-image: url("..http://img.dovov.comlayout/bg.png"); background-repeat: no-repeat; background-size: 100% 100%; height: 100vh; margin: 3px auto 0; position: relative; }` 

我希望它的作品

Answer 10

你可以使用这个。 我已经testing过，它的工作100％正确：

 background-image:url('..http://img.dovov.combg.png'); background-repeat:no-repeat; background-size:100%; background-position:center; 

您可以在此屏幕大小模拟器上testing您的网站的响应能力： http : //www.infobyip.com/testwebsiteresolution.php

每次进行更改时清除caching，我宁愿使用Firefox进行testing。

如果你想使用图像forms的其他网站/ URL，而不是像： background-image:url('..http://img.dovov.combg.png'); //这个结构是使用你自己的托pipe服务器的图像。 然后像这样使用： background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

请享用 ：）

Answer 11

通过添加填充到底部图像高度/宽度x 100 =填充底部的响应网站％：

http://www.outsidethebracket.com/responsive-web-design-fluid-background-images/

---

更复杂的方法：

http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios

---

尝试调整背景IE浏览器Firefox Ctrl + M来看看神奇的漂亮脚本，我认为最好的一个：

http://www.minimit.com/demos/fullscreen-backgrounds-with-centered-content

Answer 12

  <style> * { padding: 0; margin: 0; box-sizing: border-box; } #res_img { background: url("https://s15.postimg.org/ve2qzi01n/image_slider_1.jpg"); width: 100%; height: 500px; background-repeat: no-repeat; background-size: 100% 100%; background-position: center; border: 1px solid red; } @media screen and (min-width:300px) and (max-width:500px) { #res_img { width: 100%; height: 200px; } } </style> <div id="res_img"> </div> 

Answer 13

如果您想要显示整个图像而不考虑纵横比，请尝试以下操作：

 background-image:url('..http://img.dovov.combg.png'); background-repeat:no-repeat; background-size:100% 100%; background-position:center; 

这将显示整个图像，无论屏幕大小。

Answer 14

自适应与jQuery的平方比

 var Height = $(window).height(); var Width = $(window).width(); var HW = Width/Height; if(HW<1){ $(".background").css("background-size","auto 100%"); } else if(HW>1){ $(".background").css("background-size","100% auto"); } 

Answer 15

只是两行代码，它的作品。

 #content { background-image: url('..http://img.dovov.combg.png'); background-size: cover; } 

Answer 16

 background:url("img/content-bg.jpg") no-repeat; background-position:center; background-size:cover; 

要么

 background-size:100%; 

Answer 17

我认为，最好的办法是这样的：

 body { font-family: Arial,Verdana,sans-serif; background:url("http://img.dovov.comimage.jpg") no-repeat fixed bottom right transparent; } 

这样就没有必要再做什么了，这很简单。

至less，它对我有用。

我希望它有帮助。