我试图获取此容器的全屏背景图片:
<div class="header"
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2 class="text-center">test1</h2>
<p class="lead text-center">test2</p>
<p class="text-center"><a class="btn btn-lg btn-success"
href="http://localhost/"><span
class="glyphicon glyphicon-plus"></span> something</a></p>
</div>
</div>
</div>
但是,图片显示没有全屏视图,我试图得到这样的东西:
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
我按照每个教程进行操作,但没有任何工作。
我不确定我是否Yii2
使用bootstrap
是否有意义。
顺便说一句,这是我的site.css
html,
.my-navbar {
background-color: #ffffff;
height: 10px;
border-bottom: 1px solid #eeeeee;
}
body {
height: 100%;
background: #F5F5F5;
}
.footer {
height: 180px;
background-color: white;
border-top: 1px solid #eeeeee;
padding-top: 20px;
}
.wrap {
min-height: 100%;
height: auto;
margin: 0 auto -60px;
padding: 0 0 60px;
}
.wrap > .container {
padding: 70px 15px 20px;
}
.header {
height: 400px;
background: url('../images/header.jpg') no-repeat center center;
min-height:100%;
background-size:100px 150px;
-webkit-background-size: cover;
-moz-background-size: cover;
width: 100%;
-o-background-size: cover;
}
.jumbotron .btn {
font-size: 21px;
padding: 14px 24px;
}
.not-set {
color: #c55;
font-style: italic;
}
/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings', fantasy;
font-style: normal;
font-weight: normal;
line-height: 1;
padding-left: 5px;
}
a.asc:after {
content: /*"\e113"*/ "\e151";
}
a.desc:after {
content: /*"\e114"*/ "\e152";
}
.sort-numerical a.asc:after {
content: "\e153";
}
.sort-numerical a.desc:after {
content: "\e154";
}
.sort-ordinal a.asc:after {
content: "\e155";
}
.sort-ordinal a.desc:after {
content: "\e156";
}
.grid-view th {
white-space: nowrap;
}
.hint-block {
display: block;
margin-top: 5px;
color: #999;
}
.error-summary {
color: #a94442;
background: #fdf7f7;
border-left: 3px solid #eed3d7;
padding: 10px 20px;
margin: 0 0 15px 0;
}
如何在标题中实现全屏背景图像,例如此示例?
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
答案 0 :(得分:2)
使用容器类添加其他类,并使用带有cover选项的背景图像。我在这里使用.bimg。
<div class="container bimg"></div>
.bimg{
width:100%;
background:url('PATH');
}
答案 1 :(得分:1)
您是否可以尝试将其作为Codepen的示例?
你的div class&#34; header&#34;没有结尾&#34;&gt;&#34;这可能会导致一些问题。
在指定了背景img的CSS中尝试使用以下内容:
background-size:cover;
答案 2 :(得分:1)
将此添加到标题css
position: absolute;
top: 0;
left: 0;
right: 0;
现在应该可以了。