bootstrap背景图片实现响应式布局大小解决方案

bootstrap本身就是一个响应式框架,但有时候我们在设置背景图时会出现多端背景图片大小不受响应式控制,这有一个简单的解决方案,各位可以利用类似方法自己拓展。

我的需求

  • 在web端大屏的时候,显示2/3的页面
  • 在屏幕过小的时候,背景图显示100%
  • 在手机屏幕上,背景图隐藏不显示

效果图片

 

css代码实现

.login-bg {
    background-color: #fff;
    background-image: url('http://diyishouhou.oss-cn-shanghai.aliyuncs.com/home_img_left.png');
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 66.6%;
    /*min-height: 800px;*/
    /*max-height: 30%;*/
    /*min-height: 30%;*/
    overflow: hidden;
    width: 100%;
}

//宽度小于768px 则显示全图
@media (max-width: 768px) {
    .login-bg {
        background-size:100%;
    }
}
//宽度小于500px则不显示背景图
@media (max-width: 500px) {
    .login-bg {
        background-image:none;
    }
}
<body class = 'login-bg'>.....</body>