文章/答案/技术大牛

发布

社区首页 >问答首页 >css容器的全高作为背景图像的全高

问css容器的全高作为背景图像的全高
EN

Stack Overflow用户

提问于 2015-07-26 03:23:14

回答 1查看 510关注 0票数 0

我正在用bootstrap构建一个响应式的登录页面。到目前为止，我有this page。我遇到了一个问题。容器的全高与背景图像的全高不匹配。为了保持一个完整的响应式登录页面，我使用一个真实的图像作为背景图像。

问题是如何让容器获得图像的高度，以便保持所有设备的百分比，就像在this example中一样

这是css的源代码

html{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;

}


body{
    zoom: 1;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    width: 100%;
}
}



.center{
    text-align: center;
    margin: 0 auto;
}


.container{
    background: url('../images/bgm.jpg') no-repeat scroll contain;
    background-size:  100%; 
    height: 100% !important;
    width: 100% !important;
}


.bgm{  
    z-index: -9999;
    top: 0;1
    position: absolute;
    width: 100%;
    right: 0;
}


    #logo{
        background-color: red;
    }

    #dail{
        background-color: blue;
    }

    #header{
        height: 15%;
    }

    #text-h{
        height: 12%;
    }
    #para{
        height: 7%;
    }
    #header{
        height: 15%;
    }


    .red{
        background-color: red;
    }

    .green{
        background-color: green;
    }

html

<html lang="en"><head>


    <meta charset="utf-8">

    <title>דירות קו ראשון לים בפנמה</title>
    <meta name="description" content="דירות קו ראשון לים בפנמה">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.css">

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
<!--    <link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosanshebrew.css"> -->



    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">
    <!--    <script src="js/jquery.backstretch.js"> -->

    <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body cz-shortcut-listen="true">


    <div class="container">

        <img src="images/bgm.jpg" class="bgm">

        <div class="row" id="header">
            <div class="col-lg-4 col-md-6 col-xs-6  center" id="logo">
asdasdasd               
            </div>  
            <div class="col-lg-4 col-md-6 col-xs-6 center" id="dail">
asdasdasd
            </div>
        </div>
        <div class="row" id="text-h">
            <div class="col-lg-4 col-md-8 col-xs-8 col-offset-4 center red" id="h1">
asdasdasd               
            </div>  

        </div>

        <div class="row" id="para">

            <div class="col-lg-4 col-md-12 col-xs-12 center green" id="par">
asdasdasd               
            </div>  
        </div>

        <div class="row">
            <div class="col-lg-4 col-md-12 center main red">

        <form method="POST" d id="form" action="form.php">

                    <input id="name" maxlength="40" name="name" size="20" type="text" placeholder="שםי" required>



                    <input id="phone" maxlength="40" name="phone" size="20" type="text"  placeholder="טלפון" required>

                    <input id="email" maxlength="80" name="email" size="20" type="email" placeholder="אימייל" required>

                </form>
            </div>  
        </div>
        </div>

    </body>
</html>

tnx

twitter-bootstrap

html

css

回答 1

Stack Overflow用户

发布于 2015-07-26 03:57:30

使用

background-size: cover;

而不是100%。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31630265

复制

相似问题

问css容器的全高作为背景图像的全高
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css容器的全高作为背景图像的全高EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问css容器的全高作为背景图像的全高
EN