Оверлей изображения изображения героя перемещается по размеру браузера

Я разместил пару тегов заголовков, наложенных на изображение моего героя. Когда я изменяю размер браузера, наложение текста перемещается вверх и вниз. Любые идеи относительно того, как сделать текст зафиксированным в середине изображения героя?Оверлей изображения изображения героя перемещается по размеру браузера

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; 
}

Мой адрес Веб-сайт: http://adolfobarreto.atwebpages.com

источник

2016-01-12 Adolfo Barreto

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

источник

2016-01-12 09:37:13

Спасибо Germano ... Это сработало. Я очень ценю вашу помощь! - Adolfo –

Adjust heroText класс CSS для

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

}

источник

2016-01-12 09:36:09

Спасибо за помощь. –

Ваш прием @AdolfoBarreto –

Надеется, что это поможет вам:

По вашему запросу, я испытал это и попытался битым код, так что может помочь вам.

Что я сделал это:

К вашему "малых-12 небольших колонн в центре" DIV; i дал ему позиция: относительная;

Другой «heroText», я дал его свойство ширина: 100%; margin-top: 28%;; так что это исправит ваш текст и может быть просмотрен в любом типе браузера и устройств.

Я пробовал на своем рабочем столе и работает хорошо.

<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>

источник

2016-01-12 09:39:42

Большое спасибо за вашу помощь. –

@AdolfoBarreto вы очень желанны ... –

Предлагаю вам использовать структуру таблицы отображения для этого.

Я не думаю, что вам нужна такая сложная структура, но оставить его как есть:

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

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

Я бы удалить де <br> и чистой прибыли .heroText

источник

2016-01-12 09:52:12 cromillo

Спасибо за помощь. –

@AdolfoBarreto Добро пожаловать! – cromillo

Вот решение:

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

источник

2016-01-12 10:32:25

Оверлей изображения изображения героя перемещается по размеру браузера

ответ

Смежные вопросы