【发布时间】：2018-02-20 13:12:19
【问题描述】：
我目前正在尝试创建一个测试站点，只是为了练习，一方面，我的背景图像不会居中/并且每当我尝试使其具有响应性时都会不断重复。整个图像也不存在于浏览器中。任何解决方案都会有所帮助。
我试过了 背景尺寸：封面； 背景位置：中心；
它仍然无法正常工作。
body {
font-family: Nunito;
background-image: url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1005f3d059e15847f5b8e818aafe7b51&auto=format&fit=crop&w=2550&q=80);
background-size: cover;
background-position: center;
}
.navbar {
background-color: transparent;
border: 0px;
}
.jumbotron {
color: #C7DB8A;
background-color: transparent;
text-align-last: center;
padding-top: 15%;
}
.jumbotron p {
color: #5E9589;
}<!--lorem: ctrl+shift+L -->
<!--hr styles-->
<!DOCTYPE html>
<html>
<head>
<title>asdfs Home</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/home.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/home.css">
<link rel="stylesheet" type="text/css" href="css/fa-svg-with-js.css">
<link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet">
</head>
<body>
<!--nav-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ABXCH</a>
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li><a href="#">
<i class="fas fas fa-home"></i>
Home
</a></li>
<li><a href="#">
<i class="far fa-question-circle"></i>
About
</a></li>
<li><a href="#">
<i class="far fa-handshake"></i>
Contact
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">
<i class="fas fa-sign-in-alt"></i>
Login
</a></li>
</ul>
</div>
</div>
</nav>
<!--jumbo-->
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="jumbotron">
<h1>asdfas</h1>
<p>Your Online Insurance Sales Office</p>
<hr>
<p><a class="btn btn-default btn-lg" href="#" role="button">Learn More</a></p>
</div>
</div>
</div>
</div>
</body>
</html>【问题讨论】：
-
你试过加
background-repeat: no-repeat;
标签： javascript html css twitter-bootstrap-3