Some help with my profile page

1

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: https://codepen.io/JT_Cerqueira/full/YxOLxg/

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>
        <h4>FRONT END WEB DEVELOPER AIMED AT FULL STACK</h4>
      </div>
    </div>
   </div>  
  </div>
2

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(http://arqueologiaegipcia.com.br/aegipcia/wp-content/forum/uploads/2013/11/visita_a_lagoa_redonda_foto_marcia_jamille_02_2013.jpg);
  margin-top:50px;
  /* 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
3

Perfect. It worked wonderfully! Thank you very much!

1 Like
4

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

5

How do I do that? LOL! XD