Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
5 / 2 / 3
Регистрация: 21.06.2013
Сообщений: 117

Сделать фон для шапки с overflow: hidden и margin:0 auto

23.09.2016, 11:39. Показов 1654. Ответов 2
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Верстка через bootstrap
Есть изображение шириною в 2400px, его надо поставить в задний фон для хедера (высота:869px). Причем контейнер, в котором находится хедер, должен быть по центру изображения.
Фону задаю overflow: hidden, чтобы не было скролла, но контейнер c margin:0 auto отступает от начала изображения и обрезается, в итоге он становится по центру, но из-за overflow: hidden так же обрезается. Вот скрин, чтоб было понятнее:

А по макету надо так:


Добавлено через 17 минут
Еще: фон задан для body
Частично решилось, но все равно не то, я убрал выосту и ширину для body, теперь container не обрезается, но все равно становится впритык к краю

Теперь же выходит, что margin 0 auto работает уже от разрешения экрана, а не от ширины body.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
23.09.2016, 11:39
Ответы с готовыми решениями:

Как сделать фон шапки страницы для разных разрешений монитора?
Подскажите пожалуйста, как можно реализовать верстку макета, если макет 1280 шириной, и чтобы шапка этой ширины показывалась без скролинга...

Margin 0 auto для iOS
Здравствуйте. Имеется сайт, состоит из #header, #contentMain и #footer. У #contentMain стоит margin 0 auto и заданная ширина width:...

Overflow-x:auto и overflow-y:visible не работают вместе
Есть блок который должен быть overflow-x: auto; overflow-y: visible. Но вместе эти 2 свойства не хотят работать. Т.е. по Y обрезается...

2
11 / 11 / 2
Регистрация: 02.02.2016
Сообщений: 44
23.09.2016, 15:50
Может нужно для изображения дать

CSS
1
background-size: cover;
1
5 / 2 / 3
Регистрация: 21.06.2013
Сообщений: 117
23.09.2016, 22:41  [ТС]
MrHidalgo, пробовал, так же contain
Вряд ли можно поставить контент по центру изображения, обрезав при этом его края и чтобы не было сдвига, как у меня. И так сойдет, довольно неплохо вышло, после удаления ширины и высоты для body
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.09.2016, 22:41
Помогаю со студенческими работами здесь

Не смещается центр div c margin 0 auto, который в другом div'e с другим margin
<div style="margin-left: 100px"> <div style="margin: 0 auto;"><a href="" class="pageButton">1</a></div> </div> В первом диве...

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Как сделать что фон шапки слился с фоном body?
Есть сайт p-hobby.ru Если присмотреться видно что фон header и body отличается. В шапке он повторяется криво, как сделать что фон шапки...

Overflow: hidden
Ну, вот собственно, элементарный код: <table width="50%"> <tr> <td style="height: 50px; overflow: hidden;"> в чащах юга жил...

Отменить свойство "overflow: hidden;" для дочерних элементов
Добрый день. Вот кусочек кода: <nav> <div id = "m01" class = "menu_item"> <div class = "hidden"> <div class =...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
Отображение реквизитов в документе по условию и контроль их заполнения
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II
kumehtar 04.04.2026
Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён
Maks 04.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .
Программный контроль заполнения реквизита табличной части документа
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .
wmic не является внутренней или внешней командой
Maks 02.04.2026
Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения
Maks 02.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список
Maks 01.04.2026
Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru