Блог

Главная - Вопросы по программированию - CSS фоновое изображение; Изменение размера

CSS фоновое изображение; Изменение размера

#html #css #resize #background-image

#HTML #css #изменение размера #фоновое изображение

Вопрос:

Ситуация: у меня есть элемент div с логотипом, навигацией и вводным текстом внутри него. За всем этим должно стоять фоновое изображение.

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

Заголовок — обычный размер экрана http://s25.postimg.org/fh7npk5am/header_normal.jpg

Заголовок — Окно изменено, уменьшено http://s25.postimg.org/685hffwem/header_resized.jpg

Приветствуется любая помощь или предложения, ребята! Пожалуйста, просто спросите, нужна ли вам дополнительная информация или подробности об этом.

—-> JSFiddle находится в комментариях<—-

Комментарии:

1. Используйте jsfiddle или codepen или что-то еще, чтобы продемонстрировать проблему.

2. Возможно, эта ссылка поможет вам создать CSS-ссылки

3. Ваш код (и jsfiddle) должен быть в самом вопросе. Комментарии не длятся вечно.

Ответ №1:

Думаю, вы могли бы использовать «background-size:cover;».
Это должно поддерживать фоновое изображение по крайней мере на 100% в любое время.

Возможно, вам захочется установить высоту div на фиксированное количество пикселей, например «height: 250px».

Ответ №2:

Попробуйте эти свойства css:

 background-size:cover;

или 

 background-size:contain;

или

     html{
    background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat 0 0 scroll;
    background-color:#0C0C0C;
    background-size: 100% 100%;
    height:100%;
    width:100%;
}