Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
#1

Background на всю ширину браузера - HTML, CSS

12.07.2015, 13:36. Просмотров 1893. Ответов 16
Метки нет (Все метки)

Читал похожие темы, но не совсем они мне помогли.
Задача: Сделать фон шапки резиновым на всю ширину без потери качества. Все должно работать во всех браузерах (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)
Background на всю ширину браузера

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; 
}
В данном случае при маленьких размерах экрана шапка отваливается от верхнего края браузера.

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

ну и на самом деле было много вариантов. И как картинкой, а не фоном вставлять. И с атрибутами авто работал. Получал не тот эффект, либо потерю качества. Ни чего. Я для примера смотрел современные сайты(в большинстве случаев они были адаптивными), так вот в них хорошо реализована эта шапка с фоном и работает в IE. Подскажите какие-нибудь решения. Может реализовать некую деградацию для IE, но опять же я видел в них работает. Теоретически cover подходит, но заставить его работать в ie у меня не получилось.
http://www.cyberforum.ru/html/thread1395864.html
0
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.07.2015, 13:36
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Background на всю ширину браузера (HTML, CSS):

Div не заполняется на всю ширину браузера
Здравствуйте. Скажите пожалуйста. Почему у меня не заполняется div на всю...

Как сделать блок на всю ширину окна браузера
У меня возникла проблема с размерами &lt;div&gt; Не получается сделать на всю 100%...

Сделать список на всю ширину и сделать border-right не на всю высоту
Доброго времени суток. 1. Как сделать border-right не на всю высоту. Вот как...

Как не изменять ширину background
Всем привет. Есть верстка. &lt;section class=&quot;section first-section&quot;&gt; ...

Сделать конкретный background на всю страничку
Здравствуйте. Нужно сделать такой background на всю страничку. Можно,...

16
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 14:04 #2
Во-первый позиционирование фона не 100% 90% , а 0 0. Либо вообще не указывать этот параметр.
Во-вторых у вас фон указан без повторения, а разрешение картинки меньше разрешения экрана.
В третьих вы поставили свойство background-size: 100%; да оно растянет фон(картинку) на всю ширину экрана, но при этом качество теряется хоть и незначительно.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 14:36  [ТС] #3
1)Первый пункт нужен для того что бы при изменении размеров экрана фокусировка была на определенном месте. Так как cover обрезает ее при невозможности разместить целиком.
2)Все правильно без повторений. Так как изображение цельное и не может дублироваться. Оно должно растягиваться как при адаптивном дизайне.
3)Это все го лишь пример как я пробовал реализовать решение своей проблемы. Этот метод мне не подошел.

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

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

Добавлено через 20 минут
Может необходимо обращаться в раздел JS? Или искать хаки для IE ???
0
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 15:27 #4
С height:250px; и вашим позиционированием 100% 90% и отваливается шапка.
Для корректного отображения используйте медиа запросы в css. Вернее отваливается не шапка, а фон в ней.
Цитата Сообщение от Beauty69 Посмотреть сообщение
http://www.dorigati.it/en не совсем то, но как вариант.
Здесь картинка, а не фон. С картинкой было бы меньше мороки.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 15:35  [ТС] #5
Да убрав позиционирование фонового изображения. Отступ теперь появляется не с верху , а снизу. Все же не вариант.
Да и без позиционирования, фокус изображение при определенных разрешениях экрана не в том месте. :-( Получается ерунда.

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

Наверное понял к чему вы ведете. Сейчас переверстаю и отвечу что получается.
0
Fedor92
Человек из 90-х
Эксперт HTML/CSS
2551 / 2215 / 1002
Регистрация: 15.12.2012
Сообщений: 8,156
12.07.2015, 15:38 #6
Beauty69, то есть тег <header> Вас не смущает? Вас смущает свойство background-size:cover, которое не будет работать в ie8...
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 15:58  [ТС] #7
<!--[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
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 16:02 #8
Beauty69, я же уже писал выше чтобы вы использовали media запросы.

Добавлено через 36 секунд
Цитата Сообщение от Beauty69 Посмотреть сообщение
Может есть вариант сделать обычным img , но мне наверх нужен логотип + название сайта + блок контактов???
Вы что-то слышали про z-index ?
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 16:10  [ТС] #9
Background на всю ширину браузера

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

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

Добавлено через 6 минут
А с поддержкой в ie8 не будет проблем с @media ???
0
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 16:42 #11
Цитата Сообщение от 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, то тут нужно будет продумать позиционирование.

Вариантов много, нужно просто выбрать подходящий.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 16:48  [ТС] #12
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Дело не в background-size, а в height: 250px
Ну когда я устанавливал 100% и убирал height:250px , получался тот же эффект.

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

Тема пока не закрыта. Отпишу что получится.
0
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 17:27 #13
Цитата Сообщение от Beauty69 Посмотреть сообщение
ну когда я устанавливал 100% и убирал height:250px , получался тот же эффект.
Покажите код.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 17:47  [ТС] #14
Цитата Сообщение от 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 минуты
Этот эффект появляется когда элементы хедера становятся выше чем фоновая картинка.
0
Sn1p3rOk
281 / 168 / 85
Регистрация: 19.04.2014
Сообщений: 1,098
Завершенные тесты: 2
12.07.2015, 17:53 #15
Лучший ответ Сообщение было отмечено Beauty69 как решение

Решение

Для вашего случая подойдут медиа запросы.
1
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
12.07.2015, 17:55  [ТС] #16
Цитата Сообщение от Sn1p3rOk Посмотреть сообщение
Для вашего случая подойдут медиа запросы.
Сейчас доделаю с позиционированием. Выложу результат и попробую через медиа.
0
Beauty69
0 / 0 / 0
Регистрация: 11.12.2012
Сообщений: 30
13.07.2015, 21:41  [ТС] #17
С позиционированием не получается. Может нет опыта. Основной контент налазит на шапку. Но я нашел выход. Есть примочки для IE 8 что бы работало пусть не совсем корректно свойство cover. Но на самом деле лучше всего использовать bootstrap. Нет проблем с IE и нет проблем с адаптивностью изображений. Спасибо всем кто помог. Сверстал на bootstrap, не могу нарадоваться.
0
13.07.2015, 21:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
13.07.2015, 21:41
Привет! Вот еще темы с решениями:

Баг в Chrome body background не на всю страницу
Народ, может кто сталкивался в хроме такой баг, что фон страницы не полностью...

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

Блок не на всю ширину
Блок отображается не на всю ширину его ширина 980 ? Помогите.

Div на всю ширину экрана
простейшая казалось бы задачка. однако если указывать width 100% он не...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
17
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru