Блок DIV с фоном обрезается? Исправим!

2014.08.18
Частенько при создании сайтов с резиновой вёрсткой, а при должном таланте и при использовании фиксированной верстки, возникают неожиданные спецэффекты, которые не могут объяснить ни коллеги, ни многочисленные справочники, ни форумы. При создании лэндинга также натолкнулись на интересный момент при тестировании. Если ширина страницы больше ширины окна браузера, то фон обрезается по ширине окна. Выглядело это примерно так:


Верхний скриншот – как фон обрезался, ниже – как фон должен был выглядеть. Способ скорректировать данную ошибку нашелся после некоторых размышлений. На самом деле подобные ошибки устраняются в процессе подготовки адаптивного дизайна, но не все же его используют.

Рецепт исправления обрезания фона прост:
<div style="min-width: 1000px; background: ..."></div>

Для блока с фоном, который обрезается, мы должны установить параметр min-width со значением, равным ширине самого широкого несжимаемого блока.


Следующий пост: Аудит сайта бесплатно! (#98, 2014.09.12)
Предыдущий пост: Обновления за июль 2014 (#96, 2014.07.31)

Пост #97. Постоянная ссылка на пост: https://exogens.ru/blog/post/blok-div-s-fonom-obrezaetsya-ispravim/