Изображение заголовка перестает повторяться при изменении размера окна - PullRequest
Новая
       13

Изображение заголовка перестает повторяться при изменении размера окна

1 голос
/ 10 августа 2010

Итак, у меня есть изображение, застрявшее в верхней части моей страницы, которое повторяется по всему верху. По какой-то причине, когда я изменяю размер окна, а затем прокручиваю вправо, он перестает повторяться. Div является первым в документе за пределами оболочки. Есть идеи? 

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;

}

Ответы [ 4 ]

0 голосов
/ 14 сентября 2012

Вам нужно добавить min-width, чтобы он был немного больше, чем ваш основной контент.

0 голосов
/ 10 августа 2010

Доступные тесты, установленные вашим кодом: -

  • ширина - 100% (поэтому учитывается полная ширина изображения)
  • "повторение фона - x"- Изображение будет повторяться по горизонтали

Внутренне, скажем, ширина изображения равна 250px, а ширина всего экрана браузера равна 1024px.Технически, изображение будет повторяться по горизонтали, по крайней мере, 5 раз, 4 раза - в полном размере, а последнее будет показано немного.

Теперь, если вы измените размер браузера или просмотрите ту же веб-страницу во всплывающем окне, экран вашего браузера обязательно изменит свою ширину.Допустим, теперь ширина экрана вашего браузера составляет 220 пикселей.Поскольку ширина изображения превышает ширину экрана браузера (в данном конкретном тестовом примере), изображение не будет повторяться вообще, и вы также не сможете увидеть полное изображение.

Дело не в том, что есть какая-то ошибка, это просто логическая часть, которую мы должны понять.

Надеюсь, это поможет.

0 голосов
/ 12 мая 2011

Трудно сказать по предоставленным вами деталям, но вот ответ, который может помочь.Добавить следующее 

#header {
    background-image:url('http://daveywhitney.com/img/paperhead.png');
    background-repeat: repeat-x;
    width: 100%;
    height: 145px;
    margin:0 0 20px 0;
    overflow:hidden;
    position:relative}

#wrapper {width:960px;margin:0 auto;position:relative}
0 голосов
/ 10 августа 2010

Кажется, это нормально работает в FireFox.Проверьте ширину родительского элемента при изменении размера окна.

...