显示背景图像的特定部分

时间:2015-07-16 22:55:51

标签: html css background background-image

我在div元素中的一个背景图像有点问题。我正在使用以下CSS:

VaadinSession

我的背景图片是上面有一些人的照片。现在,如果我增加浏览器窗口的宽度,在特定点,一些人被切断(由于图像的自动调整大小为'background-size:cover')。

我的问题是:是否有任何选项(或jQuery插件),在背景图像上设置一个特定的部分,它将始终在所有窗口大小上可见,并且还填充整个元素?

2 个答案:

答案 0 :(得分:0)

您可以尝试各种解决方案;但是,您可能希望从应用背景位置这样的简单开始。

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

使用这组人的背景图片作为示例,您可以设置background-position: top,以免他们的头被切断。您还可以以像素或百分比单位设置垂直和水平位置。

答案 1 :(得分:-1)

尝试使用boostrap3 img-responsive

  

.img-responsive使图像响应(将很好地扩展到   父元素)   http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp