Фоновые изображения тела делаются легко
Приятная функция, которую вы найдете на многих сайтах, - это то, что центральная область содержимого перекрывает страницу с падающей за ней тенью. На самом деле это довольно простой способ сделать ваш блог (или другой веб-сайт) красивым с помощью одного фонового изображения.
Как это делается?
- Выясните, насколько широк ваш контент. Пример: 750 пикселей.
- Создайте изображение в своем приложении для иллюстраций (я использую Illustrator) шире, чем область содержимого. Пример: 800 пикселей.
- Установите фон изображения на тот фон, который вы хотите разместить на каждой стороне блога.
- Добавьте белую область поверх фона.
- Нанесите тень на белую область, которая выступает с обеих сторон области.
- Установите ширину области обрезки на 1 пиксель по высоте. Это сделает загружаемое изображение красивым и компактным для быстрого рендеринга.
- Выведите изображение.
Вот как я сконструировал его с помощью Illustrator (обратите внимание, что у меня область обрезки намного выше ... просто чтобы вы могли видеть, что я делаю):
Вот пример того, как результат будет выглядеть с фоновым изображением:
Вот как применить изображение с помощью тега вашего стиля тела в вашем
CSS .фон: # B2B2B2 url ('images / bg.gif') repeat-y center;
Вот фрагмент тега стиля фона:
- # B2B2B2 - устанавливает общий цвет фона страницы. В этом примере серый цвет соответствует серому на фоновом изображении.
- url ('images / bg.gif') - устанавливает фоновое изображение, которое вы хотите использовать.
- repeat-y - устанавливает повторение изображения по оси y. Таким образом, фоновое изображение будет повторяться сверху вниз на странице.
- center - устанавливает изображение по центру страницы.
Красиво и просто… одно изображение, один тег стиля!