Посты с тагом photoshop
21
декабря
2007

Как сделать «бесконечное» фоновое изображение?

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

Самый беспроблемный способ реализации графического фона состоит в использовании повторяющейся текстуры («мозаики»), которая автоматически заполнит окно любого размера. Другой несложный вариант — привязка графики к границе окна браузера (так, например, обычно делают модный фоновый градиент) или к одному из ее углов (часто используется для позиционирования больших визуальных элементов). Такие текстуры так же не «сломаются» при изменении масштаба.

Описанные методы подходят в тех случаях, когда само фоновое изображение не содержит в себе сложных деталей и «границ кадра», обрезающих объекты на картинке. Существует способ сделать «бесконечный» фон на основе фотографии, описание которого я нашел на сайте 24ways.org, и привожу здесь перевод со своими комментариями. Читать далее →