Шапка картинкой - как оптимизировать под разные разрешения

@zme9 · Регистрация: 22.09.2013

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

Приветствую всех.
Давно не верстал , да и не было таких случаев. Не понимаю как выровнять шапку , которая картинкой.
То есть есть картинка , ширина 1920px. Нужно выровнять её по центру. Но мой экран меньше , чем 1920px и поэтому картинка съезжает. Как сделать её по центру ? Посвятите , буду очень благодарен.
На первом скрине , как должно быть. На втором как сейчас. Видно что съехало в право.

@zme9 · 04.07.2014, 01:35 **[ТС]**

Нашел решение.

Добавлено через 16 минут
p.s нашел не правильное решение. Актуально.

@pitline · 04.07.2014, 02:31

Это должно решить твою проблему

CSS
1
2
    background: url('../img/sector2_bg.jpg') no-repeat;
    background-size: cover;

Если чего, похухли картина фоновым изображением(background-position, background-origin)

@Taatshi · 04.07.2014, 11:45

zme9, или ссылку на страницу, или HTML/CSS коды.

@zme9 · 04.07.2014, 21:05 **[ТС]**

Taatshi, http://fundament-stroy.net/ вот , как избавиться от съездов ?

@Taatshi · 04.07.2014, 21:32

zme9, поехали

1) Уберите фиксированную высоту у header

2) Во все блоки-обертки, из которых все вываливается при масштабировании, вставьте в конце див с очисткой выравнивания

HTML5
1
<div class="clear"></div>

CSS
1
.clear {clear:both;}

3) У Вас разделители беленькие с точечками привязаны к бэкграунду - не нужно этого делать. Бэк у Вас подстраивается под разрешение экрана - естественно, они плывут. Сделайте бэкграунд без них - а разделители давайте бэкграундом к уже конкретным блокам где они нужны.

И дайте плиз превьюшку макета - догадываться как оно должно быть в итоге - немного сложновато

@pitline · 05.07.2014, 02:47

Сперва разберись с содержимым, адаптируй его, а потом уже фон влепить нормально, толку с фона когда все содержимое не упорядочено. Сам блок с фоном не адаптивный, когда исправишь то и фон можно поставить, а сейчас сам контейнер кривой.
Когда у тебя высота блока будет изменяться пропорционально ширине блока, тогда background:cover решит твою проблему

Добавлено через 9 минут
2) Попробуй изменить размеры в фотошопе что бы ширина картинки не привышала и была соизмерима с высотой

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626

	Шапка картинкой - как оптимизировать под разные разрешения 04.07.2014, 01:13. Показов 2340. Ответов 6 Метки нет (Все метки) Приветствую всех. Давно не верстал , да и не было таких случаев. Не понимаю как выровнять шапку , которая картинкой. То есть есть картинка , ширина 1920px. Нужно выровнять её по центру. Но мой экран меньше , чем 1920px и поэтому картинка съезжает. Как сделать её по центру ? Посвятите , буду очень благодарен. На первом скрине , как должно быть. На втором как сейчас. Видно что съехало в право. Миниатюры 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	04.07.2014, 01:35 [ТС]
	Нашел решение. Добавлено через 16 минут p.s нашел не правильное решение. Актуально. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	04.07.2014, 11:45
	zme9, или ссылку на страницу, или HTML/CSS коды. 0

@zme9 94 / 67 / 23 Регистрация: 22.09.2013 Сообщений: 626
	04.07.2014, 21:05 [ТС]
	Taatshi, http://fundament-stroy.net/ вот , как избавиться от съездов ? 0

@pitline 42 / 10 / 6 Регистрация: 21.12.2013 Сообщений: 208
	05.07.2014, 02:47
	Сперва разберись с содержимым, адаптируй его, а потом уже фон влепить нормально, толку с фона когда все содержимое не упорядочено. Сам блок с фоном не адаптивный, когда исправишь то и фон можно поставить, а сейчас сам контейнер кривой. Когда у тебя высота блока будет изменяться пропорционально ширине блока, тогда background:cover решит твою проблему Добавлено через 9 минут 2) Попробуй изменить размеры в фотошопе что бы ширина картинки не привышала и была соизмерима с высотой 0

Шапка картинкой - как оптимизировать под разные разрешения

Решение