我需要创建一个简单的快速响应的启动页面，其中有一个完整的背景图像，在图像的上半部分有一个徽标、文本和CTA。
Mobile\\u View图像是将浏览器缩小为移动设备视图时页面的外观。[！[在此输入图像描述][1][1]
正如您在移动视图上看到的，徽标正在关闭页面。我已经尝试了我能想到的一切，以及我在网上找到的每一个“解决方案”，但仍然无法付诸实施。
此外，即使在全分辨率下，它在大分辨率显示器上看起来也很好，但当我在较小的显示器上查看时，它会像这样被切断：
下面是我使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sign up to Betsson today</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style>
html{
background:url(\'images/page_background.png\') no-repeat center center;
min-height:100%;
background-size:cover;
}
.fullbackground {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.container-fluid {
padding-top: 10px;
padding-bottom: 600px;
}
body {
font-size:100%; /* flexible baseline */
}
h1 {
font-size: 25px; Montserrat, sans-serif;
line-height: 1.0;
color: #ffffff;
}
.button{
max-width: 100%;
height: auto;
}
.logo{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="fullbackground">
<div class="container-fluid bg-1 text-center">
<div class="logo">
<br>
-->logo（徽标）
示例文本行1
t示例文本行2 <img src="images/page_shadow.png" alt="Page Shadow">
<h1><b>SIGN UP NOW</b> & SAMPLE TEXT FOR DEMO</h1>
<br>
<div class="button">
--> Here would be a link
<img src="images/company_EN_CTA.png" alt="CTA">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
我仍在学习响应式设计的诀窍，所以如果我错过了一些愚蠢的东西，请容忍我。
任何帮助都将不胜感激
另外，我不得不从代码中删除一些链接，因为我没有足够的声誉来这么做
SO网友:Amirmasoud
据我所知，在bootstrap 3中，您有两个部分标题，一个用于注册，一个用于徽标：
<div class="row">
<div class="col-md-6 col-xs-12">logo here</div>
<div class="col-md-6 col-xs-12">Register here here</div>
</div>
这会让你的头球反应灵敏。如果您希望图像响应迅速，可以在bootstrap 3中执行以下操作：
<img src="..." class="img-responsive" alt="Responsive image">
它将根据浏览器witdh自动调整大小。
对于背景图像，我建议您使用css封面属性：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
