Container with a fullscreen background image in Yii2 - html

Question

I'm trying to get full screen background image for this container:
<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>
But, the picture is showing without fullscreen view and i'm trying to get something like this:
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/
and i followed every tutorial for it, but nothing is worked.!
i'm not sure if i'm using Yii2 with this bootstrapmakes any sense.
Btw, this is my 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;
}
What should i do for achieve full screen background image like this example in header?
http://ironsummitmedia.github.io/startbootstrap-business-frontpage/

Answer 1

Add this to the header css
position: absolute;
top: 0;
left: 0;
right: 0;
It should work now.

Answer 2

Could you try to putt it up as an example on Codepen?
Your div class "header" doesn't have an ending ">" which might be causing some problems.
Try with the following in the CSS where the background img is specified:
background-size:cover;

Answer 3

Add a other class with container class and use background image with cover option. Here i use .bimg for example.
<div class="container bimg"></div>
.bimg{
width:100%;
background:url('PATH');
}