Geert Van de Berg Geert Van de Berg -4 years ago 177
CSS Question

Bootstrap full screen header

I've been trying to get a full screen

background
in the
header
tag but for some reason it doesnt show?

Code



header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url(../img/header.jpg);
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}

<header></header>




Answer Source

you are missing height:100% in header but even so it won't display because this a child of body and html you need to give height:100% and width:100% to parents (body/html)

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
}
header {
  position: relative;
  width: 100%;
  min-height: auto;
  height: 100%;
  text-align: center;
  color: #fff;
  background-image: url(//lorempixel.com/500/500);
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
<header></header>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download