Some help with my profile page

Hi guys I have this situation,

I have a background image, and I want to put a text in the middle of this background image, but nothing seems to work. I tried everything I know. If anyone could help me I would appreciate.

Here is the link of my code pen:

I want to put my h4 and h1 in the middle of the first picture, that is in the headwraper div, but it turns out that it shows right below the image.

Any one help please?

Here is the code:

  <div id="headwraper">
    <div class="container-fluid">
     <div class="row">
      <div class="col-sm-6 col-sm-offset-3 col-xs-12">
        <h4>HELLO WORLD, I'M</h4>
        <h1>JT CERQUEIRA</h1>

You have a padding-top: 750px; on #headwraper use a lower value, from my point of view you shouldn’t try to achieve that with padding though I think you can also do this:

#mypicture {
  background: url(;
  /* padding-top:750px; */
  text-align: center;
  background-attachment: relative;
  background-position: top center;
  width: 100%;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

#name-banner {
  margin-top: 100px;  /* Or whatever px, em, vh or nothing*/
1 Like

Perfect. It worked wonderfully! Thank you very much!

1 Like

Sure no worries, remember to mark as solution if it was!

How do I do that? LOL! XD