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

问题描述:

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

使用引导3.3.6建立这个页面我这个example page

类似。管理员登录页面被划分为分屏。

  • 左手边登录区
  • 右手边的是在上面的文本内容的背景图像。 login page

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

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

您应符合以下更改.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; 
} 

这里的东西,让你开始: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 ; 
} 

使用的背景大小属性与封面或封底或包含的价值,并根据需要定位背景图像。

More info on the background-size property