Повторение фоновой картинки в широких окнах

Фон, заданный картинкой, на котором плитки плохо стыкуются

Штрафной балл: 0.1

Чтобы фоновый «паркет» смотрелся красиво, необходима визуальная стыковка плиточек между собой. Это надо учитывать при создании фоновой иллюстрации.

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

Штрафной балл: 0.1

В узком окне сайт смотрится нормально (рис. 7.12):

Рис 7.12. Страница сайта в узком окне

Фон страниц на нём образован при помощи фоновой «плиточки» (рис. 7.13):

Рис 7.13. Плиточка, которой вымощен фон

У разработчика небольшой монитор и он даже не подозревает, что на экранах с высоким разрешением с сайтом происходит катастрофа (рис. 7.14):

Рис 7.14. Страница сайта в широком окне

Что произошло? Ширина окна превысила ширину фоновой плиточки и браузер стал повторять её по горизонтали.

Избежать подобной неприятности можно двумя путями.

Первый способ рекомендует конструировать плиточку, ширина которой превосходит разумную ширину окна пользователя. Но возникают проблемы с определением этой самой «разумной» ширины.

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

Такое указание можно задать при помощи CSS-свойства background:

<BODY style ="background: repeat-y url(./pic/fon.gif)"

bgcolor =#fbeee7 text =black

link =blue alink =red vlink =purple >

Значение repeat-y разрешает повторение фоновой картинки fon.gif, только по вертикали, а атрибут bgcolor задаёт цвет справа от плиточки.

Теперь в качестве фоновой картинки можно использовать совсем короткое изображение (рис. 7.15):

Рис 7.15. Новая плитка для фона

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

<== предыдущая лекция	\|	следующая лекция ==>
Рекомендации	\|	Обилие декоративных элементов, не несущих функциональной нагрузки

Поделиться с друзьями:

Дата добавления: 2014-01-14; Просмотров: 503; Нарушение авторских прав?; Мы поможем в написании вашей работы!

Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет

studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление

Генерация страницы за: 0.007 сек.