Hero Image text overlay moves around on browser resize

Question

The I placed a couple of header tags overlaid on my hero image. When I resize the browser the text-overlay moves up and down. Any Ideas as to how to make the text fixed in the middle of the hero image?

html:

    <!--Hero-->
<div id="heroimage">
    <div class="row">
        <div class="small-12 small-centered columns">
            <br>
            <div class="heroText">
                <h1>Adolfo Barreto</h1>
                <h4>Web Designer</h4>
            </div>
        </div>
    </div>  
</div>

css:

    // Hero
 html, body, #heroimage{
   width:100%;
   height:100%;
 }

.heroText {

    text-align: center;
    color: white;
    margin-top: 50%;
    margin-bottom: 50%;
}

#heroimage{   

  background: url('/../assets/img/codeHero.0.jpg') center center; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

My Website address is: http://adolfobarreto.atwebpages.com

score 2 · Accepted Answer · answered Jan 12 '16 at 09:37

2

.heroText {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

answered Jan 12 '16 at 09:37

Germano Plebani

3,461
3
26
38

Thank you Germano...That worked. I really appreciate your help! - Adolfo – Adolfo J Barreto Jan 12 '16 at 09:41

score 1 · Answer 2 · answered Jan 12 '16 at 09:36

1

Adjust heroText class css to

.heroText {
text-align: center;
color: white;
margin-top: 10%;
margin-bottom: 50%;

}

answered Jan 12 '16 at 09:36

Little Phild

785
1
6
17

Thanks for the help. – Adolfo J Barreto Jan 12 '16 at 10:04

score 1 · Answer 3 · answered Jan 12 '16 at 09:39

Hope this helps you:

According to your query , i have tested it and tried to code bit so that might help you.

What i did is :

To your "small-12 small-centered columns" DIV; i have given it a property as position:relative;

The another one "heroText" i have given its property as width: 100%;margin-top: 28%; ; so that this will fix up your text and can be viewed in any type of browser and devices.

I tried in my desktop and it's working good.

<html>
<head>
    <title></title>
    <style type="text/css">
        .small-centered {
            /* Set the position only */
            position: relative;
        }
        .heroText {
            text-align: center;
            color: white;
            /* Added two lines only */
            width: 100%;
            margin-top: 28%;
        }
    </style>
</head>
    <body>
        <div id="heroimage">
        <div class="row">
            <div class="small-12 small-centered columns"> 
            <!-- Here in above given small-12 smaill-centered columns DIV , provide 1 CSS property that, " position: relative " that will set this div to its place to be aligned in a line. -->
                <br>
                <div class="heroText">
                <!-- Here in above given heroText DIV , provide 2 CSS property that, " width: 100%, marngin-top:28%; " this will fix up this child div and will set your texts written. -->
                    <h1>Adolfo Barreto</h1>
                    <h4>Web Designer</h4>
                </div>
            </div>
        </div>  
    </div>
    </body>
</html>

Thank you very much for your help. – Adolfo J Barreto Jan 12 '16 at 09:44 — Adolfo J Barreto, Jan 12 '16 at 09:44

score 1 · Answer 4 · answered Jan 12 '16 at 09:52

1

I suggest you to use a display table structure for this.

I don't think you need such a complicated structure, but leaving it as it is:

.heroimage .row {
    display: table;
    height: 100%;
}

.heroimage .row .columns {
    display: table-cell;
    vertical-align: middle;
}

I would delete de <br> and clean .heroText margins

answered Jan 12 '16 at 09:52

cromillo

41
4

Thanks for the help. – Adolfo J Barreto Jan 12 '16 at 10:04

score 0 · Answer 5 · answered Jan 12 '16 at 10:32

0

Here is solution:

#heroimage{
 position:relative;
 }
.heroText{
 position: absolute;
 top: 50%;
 width: 100%;
 }

answered Jan 12 '16 at 10:32

Adhir Pandit

1
1

Hero Image text overlay moves around on browser resize

5 Answers5