Bootstrap: Overlay A Heading Over Full-Width Image

Question

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

Дело в том, что я не могу понять, как всегда иметь его мертвую точку, независимо от размера страницы. В тот момент, когда страница полностью открыта, заголовок находится посередине, однако при изменении размера текст опускается.

Любые идеи?

<div class="row"> 
    <div id="header-image"> 
     <img src="images/header2.jpg" alt="header" class="img-responsive"> 


     <div class="row"> 

      <div class="col"> 
       <h2 class="text-center">About Us</h2> 
      </div> 

     </div> 


    </div><!-- end header image --> 
</div><!-- end row --> 


#header-image{width: 100%; height: auto; margin-top: 50px; position: relative; min-height: 200px; } 
#header-image h2{color: white; font-size: 5em; font-family: 'cmlight'; position: relative; padding-top: 10%; } 
#header-image .col {position: absolute; z-index: 1; top: 0; left: 0; width: 100%; } 

Answer 1

Использование медиа-запросов на основе размера экрана позволяет использовать разные CSS в зависимости от разрешения экрана. Чем меньше вы прокручиваете экран, тем позже он изменит его CSS.

Медиа Запрос Учебник: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

ниже код изменит размер шрифта и отступы как экран опускается ниже требований пиксельных (500px и 200px). Отступы были отброшены, чтобы сохранить их под изображением, а размер шрифта также был уменьшен.

Решение 1

JS Fiddle: https://jsfiddle.net/Lq2zj48j/7/

#header-image { 
    width: 100%; 
    height: auto; 
    margin-top: 50px; 
    position: relative; 
    min-height: 200px; 
} 

#header-image h2 { 
    color: white; 
    font-size: 5em; 
    font-family: 'cmlight'; 
    position: relative; 
    padding-top: 10%; 
} 

#header-image .col { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

@media only screen and (max-width: 500px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
} 

@media only screen and (max-width: 200px) { 
    #header-image h2 { 
     font-size: 2em; 
     padding-top: 1%; 
    } 
} 

---

Решение 2

Это решение имеет шанс "давя" изображения. Чтобы этого избежать, вы можете установить изображение в CSS (часть фонового изображения на вашем # header-изображении). Оттуда вы можете установить его, чтобы он не повторялся, не центрировался, а затем использовал мультимедийные запросы, чтобы сохранить соотношение сторон и «Увеличить» на изображении при изменении размера.

background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg'); 
    background-size: 1200px 652px; /* The dimentions of your image */ 
    background-position: center; 
    background-repeat: no-repeat; 

Js Fiddle: https://jsfiddle.net/Lq2zj48j/8/

#header-image { 
    width: 100%; 
    height: 400px; 
    margin-top: 50px; 
    position: relative; 
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b5/Mt_Elbrus_Caucasus.jpg'); 
    background-size: 1200px 652px; /* The dimentions of your image */ 
    background-position: center; 
    background-repeat: no-repeat; 
} 

#header-image h2 { 
    color: white; 
    font-size: 5em; 
    font-family: 'cmlight'; 
    position: relative; 
    padding-top: 10%; 
} 

#header-image .col { 
    position: relative;; 
    width: 100%; 
} 

@media only screen and (max-width: 700px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
    #header-image { 
     height: 300px; 
    } 
} 

@media only screen and (max-width: 500px) { 
    #header-image h2 { 
     font-size: 4em; 
     padding-top: 5%; 
    } 
    #header-image { 
     height: 200px; 
    } 
} 

@media only screen and (max-width: 200px) { 
    #header-image h2 { 
     font-size: 2em; 
     padding-top: 1%; 
    } 
    #header-image { 
     height: 175px; 
    } 
}