Содержание маркетинга

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

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

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

  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 - устанавливает изображение по центру страницы.

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

Douglas Karr

Douglas Karr является директором по маркетингу OpenINSIGHTS и основатель компании Martech Zone. Дуглас помог десяткам успешных стартапов MarTech, помог в комплексной проверке приобретений и инвестиций Martech на сумму более 5 миллиардов долларов, а также продолжает помогать компаниям во внедрении и автоматизации их стратегий продаж и маркетинга. Дуглас — международно признанный эксперт по цифровой трансформации, а также эксперт в области MarTech и спикер. Дуглас также является автором опубликованного руководства для чайников и книги по бизнес-лидерству.
Вернуться к началу кнопки
Закрыть

Adblock обнаружен

Martech Zone может предоставить вам этот контент бесплатно, потому что мы монетизируем наш сайт за счет доходов от рекламы, партнерских ссылок и спонсорства. Мы были бы признательны, если бы вы удалили блокировщик рекламы при просмотре нашего сайта.