Фоновые изображения тела делаются легко

HTML

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

Как это делается?

  1. Выясните, насколько широк ваш контент. Пример: 750 пикселей.
  2. Создайте изображение в своем приложении для иллюстраций (я использую Illustrator) шире, чем область содержимого. Пример: 800 пикселей.
  3. Установите фон изображения на тот фон, который вы хотите разместить на каждой стороне блога.
  4. Добавьте белую область поверх фона.
  5. Нанесите тень на белую область, которая выступает с обеих сторон области.
  6. Установите ширину области обрезки на 1 пиксель по высоте. Это сделает загружаемое изображение красивым и компактным для быстрого рендеринга.
  7. Выведите изображение.

Вот как я сконструировал его с помощью Illustrator (обратите внимание, что у меня область обрезки намного выше ... просто чтобы вы могли видеть, что я делаю):
Фон с Illustrator

Вот пример того, как результат будет выглядеть с фоновым изображением:
Пример фонового изображения

Вот как применить изображение с помощью тега вашего стиля тела в вашем CSS .

фон: # B2B2B2 url ('images / bg.gif') repeat-y center;

Вот фрагмент тега стиля фона:

  • # B2B2B2 - устанавливает общий цвет фона страницы. В этом примере серый цвет соответствует серому на фоновом изображении.
  • url ('images / bg.gif') - устанавливает фоновое изображение, которое вы хотите использовать.
  • repeat-y - устанавливает повторение изображения по оси y. Таким образом, фоновое изображение будет повторяться сверху вниз на странице.
  • center - устанавливает изображение по центру страницы.

Красиво и просто… одно изображение, один тег стиля!

2 комментариев

  1. 1
  2. 2

Как вы думаете?

Этот сайт использует Akismet для уменьшения количества спама. Узнайте, как обрабатываются ваши данные комментариев.