0

I've seen multiple threads explaining what I need to do and one of them has worked, the problem i now face is that it doesnt work on a selection of browsers. Can someone assist me please?

The container-fluid has a fullscreen background, with the header tag sitting inside which i would like to be horizontally and vertically aligned to the center.

HTML

<div class="container-fluid text-center">
<header role="banner" id="banner" >
        <h1>sample</h1>
        <h2>text</h2>
        <h3>bootstrap</h3>

</header>
</div>

CSS

.container-fluid {
background-image: url(../../images/intro.jpg);
background-repeat:no-repeat;
background-attachment: scroll;
background-position: center center;
background-repeat: none;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin:0px;
padding:0px;
height:100%;
}

header {
position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: Roboto-thin ;
padding: 0px;
margin: 10px;
border-style: none;
color:#ffffff ;
}

Thanks.

Mo Martin
  • 207
  • 3
  • 12
  • try using `transform` with prefixes, it's still an experimental technology, so don't expect it to work in older browsers. See doc [here](https://developer.mozilla.org/en-US/docs/Web/CSS/transform?redirectlocale=en-US&redirectslug=CSS%2Ftransform#Browser_compatibility). – Be0wulf Jan 11 '15 at 19:01
  • this is probably a duplicate of this: http://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3 – Coding Enthusiast Jan 11 '15 at 19:41
  • Thats one of the one's i tried, it doesn't work for some reason. – Mo Martin Jan 11 '15 at 19:45

1 Answers1

0

instead of using transform

header{
 position:absolute;
 top: 50%;
 left: 50%;
 width: 500px; /* set a width */
 height: 400px; /* then a height */
 margin-top: -200px; /* set to negative half of your height */
 margin-left: -250px; /* set to negative half of your width */
 font-family: Roboto-thin ;
 padding: 0px;
 border-style: none;
 color:#ffffff;
}

here's a working example: http://jsfiddle.net/1w6vnqpj/1/

Be0wulf
  • 173
  • 4
  • 16
  • Just tried this and if anything it made it worse. The browsers that did work before now dont :/ I made sure i changed the height and width to the right lengths too. – Mo Martin Jan 11 '15 at 19:24
  • my bad remove the `margin: 10px;` – Be0wulf Jan 11 '15 at 19:28
  • ah, that's sorted that problem, but now its not perfectly vertically aligned, its probably about 2/5ths of the way down – Mo Martin Jan 11 '15 at 19:36
  • just realised this can't be a reliable fix, it doesn't make it flexible and can't be seen on phones. Thanks though. – Mo Martin Jan 11 '15 at 21:51