Вміст Маркетинг

Фонові зображення тіла зроблено легко

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

Як це робиться?

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

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

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

Ось як застосувати зображення за допомогою тегу стилю тіла у вашому

CSS файлу.

фон: # B2B2B2 url ('images / bg.gif') центр повторення y;

Ось розбір тегу стилю фону:

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

Приємно і просто ... одне зображення, один тег стилю!

Douglas Karr

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

Виявлено блокування реклами

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