Background на всю ширину браузера

@Beauty69 · Регистрация: 11.12.2012

Студворк — интернет-сервис помощи студентам

Читал похожие темы, но не совсем они мне помогли.
Задача: Сделать фон шапки резиновым на всю ширину без потери качества. Все должно работать во всех браузерах (ie8 +);
Попытки реализации:
1)

HTML5
1
2
<header class="header">
    </header><!-- .header-->

CSS
1
2
3
4
5
6
.header {
    background: url(..//img/background_header.png) no-repeat 100% 90%;
    background-size: cover;
    height:250px;
    position: relative; 
}

В данном случае не работает во всех IE. (пример сделан в 11, я не говорю даже про 8)

2)

CSS
1
2
3
4
5
6
.header {
    background: url(..//img/background_header.png) no-repeat 100% 90%;
    background-size: 100%;
    height:250px;
    position: relative; 
}

В данном случае при маленьких размерах экрана шапка отваливается от верхнего края браузера.

ну и на самом деле было много вариантов. И как картинкой, а не фоном вставлять. И с атрибутами авто работал. Получал не тот эффект, либо потерю качества. Ни чего. Я для примера смотрел современные сайты(в большинстве случаев они были адаптивными), так вот в них хорошо реализована эта шапка с фоном и работает в IE. Подскажите какие-нибудь решения. Может реализовать некую деградацию для IE, но опять же я видел в них работает. Теоретически cover подходит, но заставить его работать в ie у меня не получилось.

@Sn1p3rOk · 12.07.2015, 14:04

Во-первый позиционирование фона не 100% 90% , а 0 0. Либо вообще не указывать этот параметр.
Во-вторых у вас фон указан без повторения, а разрешение картинки меньше разрешения экрана.
В третьих вы поставили свойство background-size: 100%; да оно растянет фон(картинку) на всю ширину экрана, но при этом качество теряется хоть и незначительно.

@Beauty69 · 12.07.2015, 14:36 **[ТС]**

1)Первый пункт нужен для того что бы при изменении размеров экрана фокусировка была на определенном месте. Так как cover обрезает ее при невозможности разместить целиком.
2)Все правильно без повторений. Так как изображение цельное и не может дублироваться. Оно должно растягиваться как при адаптивном дизайне.
3)Это все го лишь пример как я пробовал реализовать решение своей проблемы. Этот метод мне не подошел.

В целом я говорю что cover меня устраивает но он не работает в ie. Вот я и спрашиваю как все же это можно реализовать. Если бы не было конкретных примеров , я бы и не интересовался. А решения есть, вот только какие.

http://www.dorigati.it/en не совсем то, но как вариант.

Добавлено через 20 минут
Может необходимо обращаться в раздел JS? Или искать хаки для IE ???

@Sn1p3rOk · 12.07.2015, 15:27

С height:250px; и вашим позиционированием 100% 90% и отваливается шапка.
Для корректного отображения используйте медиа запросы в css. Вернее отваливается не шапка, а фон в ней.

Сообщение от Beauty69

http://www.dorigati.it/en не совсем то, но как вариант.

Здесь картинка, а не фон. С картинкой было бы меньше мороки.

@Beauty69 · 12.07.2015, 15:35 **[ТС]**

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

Если под hederom есть некий элемент, то ли это div либо навигация. между фоном и этим элементом появляется отступ.

Наверное понял к чему вы ведете. Сейчас переверстаю и отвечу что получается.

@Fedor92 · 12.07.2015, 15:38

Beauty69, то есть тег <header> Вас не смущает?

Вас смущает свойство background-size:cover, которое не будет работать в ie8...

@Beauty69 · 12.07.2015, 15:58 **[ТС]**

Решает эту проблему.

не смотря на то что там написано ie 9. Да и всегда можно заменить на div.

Добавлено через 10 минут
Sn1p3rOk если убрать height: 250px , то фон схлопывается, ну это и логично. Добавляем свойство overflow: hidden и получаем тоже ерунду. Логотип абсолютно позиционированный начинает заползать под div который находится ниже header. а так же пусть и картинки становится на всю ширину экрана, но она отображается на процентов 15 по высоте, что тоже не есть хорошо. Может есть вариант сделать обычным img , но мне наверх нужен логотип + название сайта + блок контактов???

@Sn1p3rOk · 12.07.2015, 16:02

Beauty69, я же уже писал выше чтобы вы использовали media запросы.

Добавлено через 36 секунд

Сообщение от Beauty69

Может есть вариант сделать обычным img , но мне наверх нужен логотип + название сайта + блок контактов???

Вы что-то слышали про z-index ?

@Beauty69 · 12.07.2015, 16:10 **[ТС]**

Вот такой должен быть макет. Загвоздка в зеленом фоне. На его месте должна быть цельная картинка. Ее нельзя разрезать, продублировать, либо продолжить одноцветным фоном. Соответственно я нашел решение через cover. Но cover не работает в ie даже в ie9 и выше. Поэтому и обратился за помощью. Ладно допустим мы ставим не cover а 100%, получается что перед фоном или после него появляются остступы. Да и сомнительна работоспособность в IE 8.

@Beauty69 · 12.07.2015, 16:18 **[ТС]**

Да я знаком с Z-index. C логотипом мы разберемся. А что делать с отступами ???

Или его применять с обычным img, а не парится с фоном и cover ???

Добавлено через 6 минут
А с поддержкой в ie8 не будет проблем с @media ???

@Sn1p3rOk · 12.07.2015, 16:42

Сообщение от Beauty69

Ладно допустим мы ставим не cover а 100%, получается что перед фоном или после него появляются остступы.

Дело не в background-size, а в height: 250px
При изменении размеров окна фон меняет масштаб. Но ширина остается 250px.
При минимальном размере окна картинка по высоте имеет меньше 250px. То есть фон закрывает не всю рабочую область блока header.

По поводу медиа запросов, на сколько я знаю, то они поддерживаются IE9+
Для того чтобы поддерживал IE8 нужно подключить это

HTML5
1
2
3
<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

Так как у вас в блоке будет элементы, то необходимо их добавить и поставить height: auto;
Тогда будет все нормально работать.

По поводу img, то тут нужно будет продумать позиционирование.

Вариантов много, нужно просто выбрать подходящий.

@Beauty69 · 12.07.2015, 16:48 **[ТС]**

Сообщение от Sn1p3rOk

Дело не в background-size, а в height: 250px

Ну когда я устанавливал 100% и убирал height:250px , получался тот же эффект.

буду пробовать еще через позиционирование, либо через @media.

Тема пока не закрыта. Отпишу что получится.

@Sn1p3rOk · 12.07.2015, 17:27

Сообщение от Beauty69

ну когда я устанавливал 100% и убирал height:250px , получался тот же эффект.

Покажите код.

@Beauty69 · 12.07.2015, 17:47 **[ТС]**

Сообщение от Sn1p3rOk

Покажите код.

CSS
1
2
3
4
5
6
7
8
9
10
.header {   
    background-image: url('http://placehold.it/1270x50');
    background-repeat: no-repeat;    
    background-size: 100%;
}
 
.name_class {
    height:100px;
    background-color: red;
}

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="wrapper">
    <header class="header">
        <strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.
    </header><!-- .header-->
    <div class="name_class">
    </div>
    <div class="middle">
        <div class="container">
            <main class="content">
....

картинка 50 высотой для наглядности эксперимента

Добавлено через 4 минуты
Я наверное понял свою ошибку. Но с Cover такого эффекта не наблюдается

Добавлено через 3 минуты
Этот эффект появляется когда элементы хедера становятся выше чем фоновая картинка.

@Sn1p3rOk · 12.07.2015, 17:53

Для вашего случая подойдут медиа запросы.

@Beauty69 · 12.07.2015, 17:55 **[ТС]**

Сообщение от Sn1p3rOk

Для вашего случая подойдут медиа запросы.

Сейчас доделаю с позиционированием. Выложу результат и попробую через медиа.

@Beauty69 · 13.07.2015, 21:41 **[ТС]**

С позиционированием не получается. Может нет опыта. Основной контент налазит на шапку. Но я нашел выход. Есть примочки для IE 8 что бы работало пусть не совсем корректно свойство cover. Но на самом деле лучше всего использовать bootstrap. Нет проблем с IE и нет проблем с адаптивностью изображений. Спасибо всем кто помог. Сверстал на bootstrap, не могу нарадоваться.

Новые блоги и статьи Все статьи Все блоги /
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	12.07.2015, 14:04
	Во-первый позиционирование фона не 100% 90% , а 0 0. Либо вообще не указывать этот параметр. Во-вторых у вас фон указан без повторения, а разрешение картинки меньше разрешения экрана. В третьих вы поставили свойство background-size: 100%; да оно растянет фон(картинку) на всю ширину экрана, но при этом качество теряется хоть и незначительно. 1

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	12.07.2015, 14:36 [ТС]
	1)Первый пункт нужен для того что бы при изменении размеров экрана фокусировка была на определенном месте. Так как cover обрезает ее при невозможности разместить целиком. 2)Все правильно без повторений. Так как изображение цельное и не может дублироваться. Оно должно растягиваться как при адаптивном дизайне. 3)Это все го лишь пример как я пробовал реализовать решение своей проблемы. Этот метод мне не подошел. В целом я говорю что cover меня устраивает но он не работает в ie. Вот я и спрашиваю как все же это можно реализовать. Если бы не было конкретных примеров , я бы и не интересовался. А решения есть, вот только какие. http://www.dorigati.it/en не совсем то, но как вариант. Добавлено через 20 минут Может необходимо обращаться в раздел JS? Или искать хаки для IE ??? 0

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	12.07.2015, 15:35 [ТС]
	Да убрав позиционирование фонового изображения. Отступ теперь появляется не с верху , а снизу. Все же не вариант. Да и без позиционирования, фокус изображение при определенных разрешениях экрана не в том месте. :-( Получается ерунда. Если под hederom есть некий элемент, то ли это div либо навигация. между фоном и этим элементом появляется отступ. Наверное понял к чему вы ведете. Сейчас переверстаю и отвечу что получается. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	12.07.2015, 15:38
	Beauty69, то есть тег <header> Вас не смущает? Вас смущает свойство background-size:cover, которое не будет работать в ie8... 1

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	12.07.2015, 15:58 [ТС]
	<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> Решает эту проблему. не смотря на то что там написано ie 9. Да и всегда можно заменить на div. Добавлено через 10 минут Sn1p3rOk если убрать height: 250px , то фон схлопывается, ну это и логично. Добавляем свойство overflow: hidden и получаем тоже ерунду. Логотип абсолютно позиционированный начинает заползать под div который находится ниже header. а так же пусть и картинки становится на всю ширину экрана, но она отображается на процентов 15 по высоте, что тоже не есть хорошо. Может есть вариант сделать обычным img , но мне наверх нужен логотип + название сайта + блок контактов??? 0

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	12.07.2015, 16:10 [ТС]
	Вот такой должен быть макет. Загвоздка в зеленом фоне. На его месте должна быть цельная картинка. Ее нельзя разрезать, продублировать, либо продолжить одноцветным фоном. Соответственно я нашел решение через cover. Но cover не работает в ie даже в ie9 и выше. Поэтому и обратился за помощью. Ладно допустим мы ставим не cover а 100%, получается что перед фоном или после него появляются остступы. Да и сомнительна работоспособность в IE 8. 0

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	12.07.2015, 16:18 [ТС]
	Да я знаком с Z-index. C логотипом мы разберемся. А что делать с отступами ??? Или его применять с обычным img, а не парится с фоном и cover ??? Добавлено через 6 минут А с поддержкой в ie8 не будет проблем с @media ??? 0

@Sn1p3rOk 288 / 175 / 86 Регистрация: 19.04.2014 Сообщений: 1,095
	12.07.2015, 17:53
	Сообщение было отмечено Beauty69 как решение Решение Для вашего случая подойдут медиа запросы. 1

@Beauty69 0 / 0 / 0 Регистрация: 11.12.2012 Сообщений: 42
	13.07.2015, 21:41 [ТС]
	С позиционированием не получается. Может нет опыта. Основной контент налазит на шапку. Но я нашел выход. Есть примочки для IE 8 что бы работало пусть не совсем корректно свойство cover. Но на самом деле лучше всего использовать bootstrap. Нет проблем с IE и нет проблем с адаптивностью изображений. Спасибо всем кто помог. Сверстал на bootstrap, не могу нарадоваться. 0

Background на всю ширину браузера

Решение