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

Question

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

与此example page

类似

我使用bootstrap 3.3.6来构建此页面。管理员登录页面被划分为分屏。

• 左侧是登录区域
• 右侧是背景图片，文字内容位于顶部。

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

我需要所有指导才能实现这一目标。谢谢！

Answer 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;
}

Answer 2

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

resultset.forEach((resultSetItem) => {
    console.log(resultSetItem.get({
        plain: true
    }));
});

将background-size属性与cover或contains的值一起使用，并根据需要定位背景图像。

More info on the background-size property