没有媒体查询的响应式背景图像答案

【问题标题】：Responsive background image without media queries没有媒体查询的响应式背景图像
【发布时间】：2016-03-31 22:03:37
【问题描述】：

在不使用媒体查询的情况下为管理页面制作响应式背景图像时，我需要一些指导。背景图像需要响应浏览器窗口而不拉伸。

类似于这个example page

我使用 bootstrap 3.3.6 来构建这个页面。管理员登录页面被分割为一个分屏。

左侧是登录区
右侧是背景图像，顶部带有文本内容。

http://www.r1.jxt.com.au/Admin/login.aspx?ReturnURL=~%2fadmin%2fdefault.aspx

我需要所有能得到的指导来实现这一目标。谢谢！

【问题讨论】：

标签： twitter-bootstrap-3 responsive-design background-image responsiveness responsive-images

【解决方案1】：

您应该使用以下内容更改您的 .bg-image 类：

.bg-image {
    background: url(../img/bg-image-md.jpg) no-repeat center center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

【讨论】：

【解决方案2】：

以下是帮助您入门的内容：http://codepen.io/panchroma/pen/BKdgKP

.bg-image{
background-image: url(http://images.jxt.net.au/jxt-admin/img/bg-image-lg.jpg);
background-size:cover;
background-position:50% 0 ;
}

使用值为cover或contain的background-size属性，并根据需要定位背景图像。

More info on the background-size property

【讨论】：