0

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

类似于此示例页面

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

  • 左侧是登录区
  • 右手边是一个背景图片,顶部有文字内容。 登录页面

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

我需要我能得到的所有指导来实现这一点。谢谢!

4

2 回答 2

0

这里有一些让你开始的东西: 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 或 contains 的 background-size 属性,并根据需要定位背景图像。

有关 background-size 属性的更多信息

于 2016-03-31T13:03:17.010 回答
0

您应该.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;
}
于 2016-03-31T12:58:12.230 回答