1

I am designing a website using bootstrap with a 100% height and 100% width image at the first page. Now I added some text and two buttons above the image and want to horizontal and vertical align. I found several solutions for this here on Stackoverflow. But sadly none of them worked in my case (only the horizontal center worked). So here is my code, I hope you guys can find a solution...

#Startseite {
 background: url(http://qnimate.com/wp-content/uploads/2014/03/images2.jpg) no-repeat center center fixed; 
 width: 100%;
 position: relative;
 height: 100%;
 background-size: cover;
 text-align: center;
 display: table;
 vertical-align: middle;
}
.CentermiddleStart {
  display: inline-block;
}
#Startseite #button-right{
    text-align: right;
}
#Startseite #button-left{
    text-align: left;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div id="Startseite">
 <div class="container CentermiddleStart">
  <div class="row">
   <div class="col-12">
    <h1>Header</h1>
    <h3>Subheader</h3>
   </div>
  </div>
  <div class="row">
   <div class="col-xs-6" id="button-right">
    <a href="#" class="btn btn-default btn-lg">Get started</a>
   </div>
   <div class="col-xs-6" id="button-left">
    <a href="#" class="btn btn-default btn-lg">Get started</a>
   </div>
  </div>
 </div>
</div>
</body>

So the image should be full size of the view and the buttons and text centered

Nik Las
  • 19
  • 1
  • 6
  • I think bootstrap has a handy grid system. Should give that a go. 3x3 (9) grid system, would leave basically every alignment you'd need, so you can center it if you'd like. – Cillian Collins May 15 '18 at 07:27

2 Answers2

2

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#Startseite {
position:relative;
}
#Startseite .its-background {
width:100% !important;
height:auto !important;
max-width:100% !important;
}
.CentermiddleStart {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
z-index:1;
text-align:center;
}
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<div id="Startseite">
<img src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="" class="its-background"/ >
 <div class="container CentermiddleStart">
  <div class="row">
   <div class="col-12">
    <h1>Header</h1>
    <h3>Subheader</h3>
   </div>
  </div>
  <div class="row">
   <div class="col-xs-6" id="button-right">
    <a href="#" class="btn btn-default btn-lg">Get started</a>
   </div>
   <div class="col-xs-6" id="button-left">
    <a href="#" class="btn btn-default btn-lg">Get started</a>
   </div>
  </div>
 </div>
</div>
</body>
siwakorn
  • 417
  • 4
  • 10
0

Solution with Flex:

JSFiddle demo

#Startseite {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: url(http://qnimate.com/wp-content/uploads/2014/03/images2.jpg) no-repeat center center fixed;
  width: 100%;
  position: relative;
  height: 100%;
  background-size: cover;
}

Solution without Bootstrap:

JSFiddle demo

<div id="Startseite">
  <h1>Header</h1>
  <h3>Subheader</h3>

  <div class="buttons">
    <button id="button-right">
      <a href="#">Get started</a>
    </button>

    <button id="button-left">
      <a href="#">Get started</a>
    </button>
  </div>
</div>
Jos van Weesel
  • 2,128
  • 2
  • 12
  • 27