Откуда стык фона в Chrome?

borus · October 26, 2011

Добрый день.

Столкнулся с тем, что в Хроме градиентный текстурный фон страницы имеет стык, причем если покрутить колесиком масштаб, он исчезает, пока не вернёшься к определённому масштабу. Вот картинка:

Почему?

В других браузерах такого нет.

Вот код:



<body>
<div id="main">
...
</div>
</body>

body {
	font: 14px/21px Verdana, Geneva, sans-serif;
	text-align: center;
	color: #003;
	background: url(images/bg.jpg) repeat;
}
#main {
	width: 100%;
	text-align: center;
	background: url(images/bg2.jpg) repeat-x top;/*верхний текстурный градиент фона*/
}

Edited October 26, 2011 by borus

Searcher · October 26, 2011

что-то вы не договариваете...

где высота у #main?

зачем width: 100%; у #main?

borus · October 26, 2011

что-то вы не договариваете...
где высота у #main?
зачем width: 100%; у #main?

А зачем высоту указывать?

на счёт width - сам не знаю, видимо хотел, чтобы фон был везде.

Сам код можно здесь посмотреть. Страница пока в IE только нормально смотрится, не знаю пока почему

Edited October 26, 2011 by borus

Searcher · October 26, 2011

А зачем высоту указывать?

Ну как бы фоновое изображение контейнер не растягивает...

на счёт width - сам не знаю, видимо хотел, чтобы фон был везде.

Блочный элемент сам по себе растягивается на всю ширину.

borus · October 26, 2011

А зачем высоту указывать?
Ну как бы фоновое изображение контейнер не растягивает...
на счёт width - сам не знаю, видимо хотел, чтобы фон был везде.
Блочный элемент сам по себе растягивается на всю ширину.

Благодарю за комментарии. А как на счёт стыка, откуда он в Хроме 14 и лишь на определённом масштабе?

Кстати, такое ощущение, что градиент контента заканчивается после первой строчки размноженной фоновой картинки bg.jpg.

Первой строчки после строчки размножения градиентной шапки bg2.jpg

Edited October 26, 2011 by borus

Searcher · October 26, 2011

Вообще масштабированием мало кто пользуется. Я сталкивался с проблемами стыковки изображений при масштабировании, но с другими. Этот вариант не попадался.

Что могу посоветовать... Оптимизировать. Для начала попробовать избавиться от лишнего контейнера. html ведь тоже имеет визуальные свойства, вот можно попробовать повесить основной фон на html, а верхушку на body. Избавимся тогда от main.

Пока кроме метода научного тыка не могу ничего предложить...

zSpx · October 26, 2011

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

#main {
background: url(images/bg2.jpg) repeat-x top;
}

не смотря на то, что стоит repeat-x при масштабировании картинка бэкграунда прыгает на 1px вверх, а освободившийся нижний пиксель заполняется верхним пикселом картинки (в вашем случае - черным) т.е. как бы пытается repeat-y отрисовать для 1px. Проверил путем подстановки картинки с красным верхом и синим низом, полоска стала красной. Можно добавить в верх картинки 1px полоску с самой нижней ее части и позиционировать background: url(images/bg2.jpg) repeat-x 0 -1px; НО это извращенный перфекционизм. Я бы забил и не парился.

Searcher · October 26, 2011

спасибо за танцы с бубном (или как я это называю - метод научного тыка) zSpx!

borus · October 26, 2011

В знак благодарности за красивый танец с бубном, духи леса нашептали мне, что проблемы из-за
#main {
background: url(images/bg2.jpg) repeat-x top;
}
не смотря на то, что стоит repeat-x при масштабировании картинка бэкграунда прыгает на 1px вверх, а освободившийся нижний пиксель заполняется верхним пикселом картинки (в вашем случае - черным) т.е. как бы пытается repeat-y отрисовать для 1px. Проверил путем подстановки картинки с красным верхом и синим низом, полоска стала красной. Можно добавить в верх картинки 1px полоску с самой нижней ее части и позиционировать background: url(images/bg2.jpg) repeat-x 0 -1px; НО это извращенный перфекционизм. Я бы забил и не парился.

Хорошие у вас знакомые в лесу. Познакомите?

Благодарю. А на счёт градиента в основной области. Почему он не донизу идёт?

zSpx · October 26, 2011

А на счёт градиента в основной области. Почему он не донизу идёт?

.content {overflow: hidden;}

borus · October 26, 2011

А на счёт градиента в основной области. Почему он не донизу идёт?
.content {overflow: hidden;}

все другие значения перепробовал и даже убрал - по прежнему все. Может ещё раз взгляните, код изменился немного благодаря Searcher и моим осмыслениям. Либо опишите, что говорят духи

Моя ссылка

Благодарю

Edited October 26, 2011 by borus

zSpx · October 26, 2011

Я думал это вполне понятно

А на счёт градиента в основной области. Почему он не донизу идёт?
.content {overflow: hidden;}

ну коль уж так... для блока с классом CONTENT нужно задать свойство overflow со значением hidden. Т.е. в CSS добавить строчку

.content {overflow: hidden;}

. У вас элемент схлопнулся. Все его дочерние элементы плавающие, это нормальное поведение, нужно применять клиринг в виде overflow.

borus · October 27, 2011

У вас элемент схлопнулся. Все его дочерние элементы плавающие, это нормальное поведение, нужно применять клиринг в виде overflow.

Благодарю, сработало, правда только в определённом диве. У меня вот такая капуста их


<div id="maincontent">
       <div class="roundedCorners">
            <div class="gradient">
                 <div class="center">

И только в center это свойство сработало. Почему?..

Не понятно главное. Это хак какой-то с overflow? В справочнике CSS по поводу hidden написано, что он скрывает всё выходящее за рамки элемента, а тут у меня даже не доходило до границ.

zSpx · October 27, 2011

:blink: для <div class="content">...</div>, просто добавьте строчку в CSS .content {overflow: hidden;}

читайте тут

Edited October 27, 2011 by zSpx

borus · October 27, 2011

для <div class="content">...</div>, просто добавьте строчку в CSS .content {overflow: hidden;}
читайте тут

Благодарю, за просвещение.

Остался один вопрос. При приближении верхняя картинка фона ползёт влево:

Что это за феномен такой?

сайт

Sign In

Откуда стык фона в Chrome?

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information