响应css背景图像

Question

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

基本上我想要实现的是图像(带有水印'G')自动调整大小而不显示较少的图像.如果可能的话

链接: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大小可以改变

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演示

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 =填充底部%:

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 来测试它。

如果您想使用其他站点/URL 中的图像，而不是像： 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

    <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('../images/bg.png');
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;

无论屏幕尺寸如何，这都会显示整个图像。