100% bg container img width issue

Question

Я не верю, что мой вопрос точно так же, как и другие, размещенные на этом сайте, поэтому, если я пропустил одно извинение заранее этому прекрасному сообществу.

Мой вопрос заключается в следующем:

я установки героя контейнера под контейнером нав для того, чтобы дать ему 100%, но когда я уменьшить размер браузера изображения (на фоне героя контейнер) масштабируется и не принимает на себя все размеры контейнера. Я не против, если изображение смещается из-за того, что оно увеличивается и уменьшается по шкале. Я просто не хочу, чтобы он стал настолько маленьким, что содержимое переднего плана оставлено без фона.

Вот скриншот, который показывает, что именно происходит: http://youtu.be/lLT3VzHOlPU

Вот codepen: http://codepen.io/MARS/pen/fEuKr

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

Answer 1

Видео - отличная идея для описания вашей проблемы. :) Вы можете использовать этот CSS на <div> с классом hero-container. Фоновое изображение всегда будет заполнять все пространство, но никогда не будет искажаться:

-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 

Смотрите здесь, что браузер поддерживает CSS3 Background-image options

Demo

Try before buy