Why isn't the text vertically centered in the div with this code? I specified the positions as 50%, so I don't understand. Also, is it possible to give a custom height for the image?
Ignore the blue line at the top of my picture, it's just the navbar.
<section class="bgimage-fooldal">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hero-text-fooldal">
<h2 class="hero_title">Hello, world! Full width Hero-unit header</h2>
<p class="hero_desc">This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique. You can gather online information about your customers and suppliers, thus staying informed.</p>
<p><a href="#" class="btn btn-large hero_to_link">Request a Quote »</a></p>
</div>
</div>
</div>
</section>
/*************************** Custom Hero CSS ****************************/
.bgimage-fooldal {
width:100%;
height:400px;
background: url('../images/assets/teszt-1.jpg');
background-repeat: no-repeat;
background-position: center;
background-size:cover;
background-attachment: fixed;
}
.hero-text-fooldal {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}