Почему обрезается правая часть фона сайта если ширина больше окна браузера?

#1 1 декабря 2014 в 18:48
Приветствую. Делаю шаблон, в шапке шаблона на фоне стоит картинка, которая занимает всю доступную ширину. Под ней имеется контейнер с шириной 1170пикселей, размер моего окна браузера 1024. Когда загружаю картинку я визуально вижу 1024 пикселей, когда я скроллю в право то картинка установленная на фоне в шапке не отображается дальше 1024 пикселей, происходит обрыв а далее пустота. Почему эта картинка загружается только до окна браузера а не на 1170 пикселей?
#2 1 декабря 2014 в 18:50
  1. <div id="wrap">
  2. <div id="header">
  3. <div class="container">
  4. <a id="logo" href="/" title=""></a>
  5. <div id="head-banner"><?php $this->printModules('head-banner'); ?></div>
  6. </div>
  7. </div>
  8. </div>
  9.  
header — у него установлен фон.
container — имеет ширину 1170 пикселей. По идее header оборачивает container и картинка тоже должна так же быть до конца, но нет
#3 1 декабря 2014 в 19:27
Atid — Gorec, а браузер какой?
#4 1 декабря 2014 в 19:29
И нет ли каких нибудь ограничений, например, для "wrap", или, предположу о выше идущем "body"?
#5 1 декабря 2014 в 20:07
Ограничений нет, браузер Firefox 33.1
#6 1 декабря 2014 в 20:12
Самое простое, — укажите ширину body
  1. min-width:1170px;
#7 1 декабря 2014 в 21:35
Эта ошибку можно повторить на любом сайте. Выходит так и должно быть. Raiden, IngDesign, спасибо за участие и совет.
#8 2 декабря 2014 в 00:35
Интересно, аж жуть!
А дайте-ка посмотреть…
#9 2 декабря 2014 в 08:36
Atid — Gorec, есть вариант адаптировать фоновое изображение с помощью свойства background-size: cover; описание свойства scratchну и для самой картинки задать как-то так:
  1.  
  2. background:url(../images/header.jpg) no-repeat center #ddd;
  3. background-size: cover;
  4.  
#10 2 декабря 2014 в 08:45
Дело даже не в картинке. html, body wrap, header занимают ширину моего окна браузера, контейнер просто выходит за их рамки, с правой стороны все эти блоки не перекрывают его ((
#11 2 декабря 2014 в 08:53
Контейнер выходит за рамки body? Это как?
#12 2 декабря 2014 в 09:48
По умолчанию body имеет ширину в 100% относительно окна браузера. Все что не помещается — выходит за рамки
#13 2 декабря 2014 в 10:39
Atid — Gorec, всё ж не понятно что именно тебя удивляет?
Ведь любой блок занимает всю доступную ширину родителя, если ему не указанно иное. Если не указанно никому из родителей твоего "header", то он, в конечном итоге будет той же ширины что и body; а его ширина равна ширине окна, если, опять же, не указанно иное.
Самые простые из возможных решений:
— display:table;
— display:inline-block;
— указать ширину явно;
#14 3 декабря 2014 в 08:25
Для наглядности картинку загрузил. Серое это контейнер с шириной 1170пикселей а желтое все блоки выше уровнем которые приравниваются к краю окна браузера. По идее желтый блок должен обернуть серый но на деле он выходит за его пределы
#15 3 декабря 2014 в 09:10
Atid — Gorec, зачем нам картинка?) мы уже представили себе визуально вашу проблему, вы код дайте) а ещё лучше ссылку на сайт, хотя бы с проблемным куском кода. Вслепую гадать не комильфо.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.