Отзывчивый фоновое изображение DIV

У меня есть следующий HTML:Отзывчивый фоновое изображение DIV

<body> 
     <div class="container"> 
      <div class="page-header"> 
       <div class="masthead"> 
        <div class="header-image"></div>

который использует Bootstrap 3.3. Я хочу установить образ заголовка, который будет использоваться в качестве баннера и будет реагировать насколько это возможно. Я поставил header-image класс, и я дал ему эти свойства:

.header-image { 
    background-image: url("../images/amazingimage.png"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-position: center; 
}

Но я не могу видеть изображение на всех. Пожалуйста, помогите мне, спасибо.

UPDATE: Вот скрипку: http://jsfiddle.net/qnsnnf9s/

источник

2014-12-22 Tal

вы уверены, что ваш путь даже правильно? Проверьте, что ваши элементы ищут это изображение png. – Musk

Установите размеры для 'div', используя' width' и 'height' – Eun

@Musk. Да, я уверен ... – Tal

height и width необходимо установить.

Я также предлагаю вам использовать свойство background-size: cover, чтобы увидеть изображение и заполнить в поле справа.

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

.header-image { 
    width: 100%; 
    height: 100px; 
    background-image: url("youreimage"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
}

Здесь обновленный скрипку http://jsfiddle.net/qnsnnf9s/3/

источник

2014-12-22 16:56:11 marquez

Спасибо вам, это работает! можете ли вы просить обновить свой ответ и изменить URL-адрес изображения (удалите ссылку на изображение, потому что я не имею права использовать его)? – Tal

// CSS BLOCK

.header-image { 
    height: 500px; //RESPONSIVE USE (%,em, or vh/vw) 
    width: 500px; //RESPONSIVE USE (%,em, or vh/vw) 
    background: url("../images/amazingimage.png") no-repeat; 
    background-size: cover; 
    -webkit-background-size: cover; 
    background-position: center center; 
    -webkit-background-position: center center; 
}

источник

2014-12-22 16:43:13

http://jsfiddle.net/qnsnnf9s/1/

Heres небольшое изменение к тому, что вы хотели. Вы хотите, чтобы ваша навигация была внутри изображения баннера или нет?

.header-image { 
    background-image: url("myimageURL"); 
    background-repeat: no-repeat; 
    background-size: 100% auto; 
    background-position: center; 
    z-index: 99; 
    width: 100%; 
    height: 100px; 
}

Общее правило: всегда используйте пиксели при работе с высотами и всегда используйте проценты при использовании ширины. Вы не можете правильно реагировать и эффективно реагировать, когда работаете с шириной в пикселях. Прокомментируйте свой ответ на вопрос выше, и я отредактирую jsfiddle с чем-нибудь, что вам нужно изменить/обновить.

источник

2014-12-22 16:55:15 PourMeSomeCode

Спасибо, что это работает! только один запрос: можете ли вы убрать ссылку на фоновое изображение? У меня нет rihgts, чтобы использовать его только для образца ... – Tal

В вашем первом вопросе ваше изображение сохраняется на '../images/amazingimage.png', просто замените ссылку на изображение этим, и вы должны быть хорошо. Я использовал изображение, чтобы вы могли легко увидеть изменение. Просто замените его, где бы вы не сохранили изображение, которое хотите использовать. Любые проблемы, дайте мне знать. Удачи! – PourMeSomeCode

Да, я знаю, но я не пользуюсь правами на использование этого изображения, это было просто для примера ... – Tal

Отзывчивый фоновое изображение DIV

ответ

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