Question

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

基本上我想要实现的是图像（带有水印“G”）自动调整大小而不显示较少的图像。如果有可能的话

link：g-floors.eu

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

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

Answer 1

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

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;

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

编辑：关于不设置宽度，高度或边距的上一行是指OP关于使用窗口大小进行缩放的原始问题。在其他用例中，如果需要，您可能需要设置宽度/高度/边距。

Answer 2

通过此代码，您的背景图像将居中并修改大小，无论您的div大小如何变化，适合小型，大型，普通尺寸，最适合所有人，我将其用于我的项目，其背景大小或div大小可以更改< / p>

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

这很容易=）

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

查看jsFiddle demo

Answer 7

这是我得到的最佳方式。

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

检查w3schools

更多可用选项

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

Answer 8

我用过

#content {
  width: 100%;
  height: 500px;
  background-size: cover;
  background-position: center top;
}

效果很好。

Answer 9

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

Answer 10

通过在底部图像高度/宽度中添加填充来响应网站x 100 = padding-bottom％：

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

尝试调整背景eq Firefox Ctrl + M的大小以查看我认为最好的一个神奇的好脚本：

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

Answer 11

你可以用它。我已经测试过，它的工作100％正确：

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size:100%;
background-position:center;

您可以在此屏幕尺寸模拟器上测试您的网站的响应性： http://www.infobyip.com/testwebsiteresolution.php

每次进行更改时清除缓存，我宁愿使用Firefox进行测试。

如果您想使用图像表格其他网站/网址而不是： background-image:url('../images/bg.png'); //此结构用于使用您自己的托管服务器中的映像。然后像这样使用： background-image: url(http://173.254.28.15/~brettedm/wp-content/uploads/Brett-Edmonds-Photography-14.jpg) ;

享受：）

Answer 12

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

background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

无论屏幕大小如何，都会显示整个图像。

Answer 13

C:\Python27\python.exe "C:/Users/Harry/Desktop/Computing Project/Galaxian.py"
Traceback (most recent call last):
  File "C:/Users/Harry/Desktop/Computing Project/Galaxian.py", line 87, in <module>
    mobs.add(Mob)
TypeError: unbound method add() must be called with Mob instance as first argument (got type instance instead)

Process finished with exit code 1

Answer 14

只需两行代码即可。

#content {
  background-image: url('../images/bg.png');
  background-size: cover;
}

Answer 15

使用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 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("/images/image.jpg") no-repeat fixed bottom right transparent;
}

通过这种方式，没有必要再做任何事了，这很简单。

至少，它对我有用。

我希望它有所帮助。

Answer 18

尝试使用background-size，但使用两个参数一个用于宽度，另一个用于高度

background-image:url('../images/bg.png'); 
background-repeat:no-repeat;
background-size: 100% 100%; // Here the first argument will be the width 
// and the second will be the height.
background-position:center;

Answer 19

background: url(/static/media/group3x.6bb50026.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: top;

position属性可用于根据需要对齐顶部和底部，而背景尺寸可用于中心裁切（封面）或完整图像（包含或100％）

响应css背景图像

19 个答案:

这很容易=）