From Bootstrap 3 to WordPress theme – header

Hi, am doing my first bs 2 wp conversion, and am having trouble with the header. Have searched the net but can’t find solution.
What I am going for is a header style similar to the agency theme, and it’s working fine in HTML5 on localhost as you can see in this screenshot. However, I can’t seem to successfully transform this into a WP theme.

The text doesn’t overlap the image, instead it is positioned correctly right after the background image. Have tried to use the position property, but unsuccessfully. Am new at PHP, have some knowledge of CSS, just don’t know how to position properly. Thanks for the help!

My code:
PHP

<header class="site-header" role="banner">
    <?php if ( has_post_thumbnail() ) { the_post_thumbnail();}
    ?>
    <div class="content">
        <div class="intro-text">
            <div class="intro-lead-in">Bem vindo à Bergamota!</div>
            <div class="intro-heading">Assina a newsletter e fica por dentro das novidades em primeira mão.<br /><small>Ah, e tem direito a surpresa!</small></div>
            <button type="button" class="btn btn-warning btn-xl" data-toggle="modal" data-target="#optinModal">Assina</button>
        </div>
    </div>
</header>

CSS

header .intro-text{padding:2em 1em;margin:8em 0 3em;background: rgba(255,255,255,.8);text-align: center;}
header .intro-text .intro-lead-in{font-family: 'Dancing Script',cursive;font-weight: 700;text-transform: none;font-size:2.8em;line-height:1.3em;text-shadow: .5px .5px 1px white;margin-bottom: .6em;}
header .intro-text .intro-heading {font-family: 'Roboto Condensed',sans-serif;-web-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-weight: 400;text-transform: none;letter-spacing: -.04em;color: #231f20;font-size:1.6em;line-height:1.3em;margin-bottom:1em;text-shadow: .5px .5px 1px white;}
@media (min-width:768px){header .intro-text{padding:300px 0 200px;background: transparent;}header .intro-text .intro-lead-in{font-size:4em;line-height:2em;margin-bottom:.1em;}header .intro-text .intro-heading {font-size:2em;line-height:1em;margin-bottom:50px;}}