Фоновите изображения на тялото се правят лесно

HTML

Хубава функция, която ще намерите на много сайтове, е, когато централната област на съдържанието изглежда да покрива страницата с падаща сянка зад нея. Това всъщност е доста прост метод да направите вашия блог да изглежда добре (или друг уебсайт) с едно фоново изображение.

Как се прави?

  1. Разберете колко широко е вашето съдържание. Пример: 750px.
  2. Изградете изображение в приложението си за илюстрация (използвам Illustrator) по-широко от областта на съдържанието. Пример: 800px.
  3. Задайте фона на изображението на фона, който искате да имате от всяка страна на блога.
  4. Добавете бял регион върху фона.
  5. Нанесете сянка върху бялата област, която се екструдира от двете страни на региона.
  6. Задайте ширината на областта за изрязване с 1 пиксел височина. Това ще направи изображението за изтегляне приятно и компактно за бързо изобразяване.
  7. Изведете изображението.

Ето как го конструирах с помощта на Illustrator (имайте предвид, че имам площ за изрязване много по-висока ... това е само за да можете да видите какво правя):
Фон с Illustrator

Ето пример за това как ще изглежда изходът с фоновото изображение:
Пример за фоново изображение

Ето как да приложите изображението, като използвате вашия таг за стил на тялото във вашия CSS файл.

фон: # B2B2B2 url ('images / bg.gif') център за повторение-y;

Ето дисекция на тага за стил на фона:

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

Хубаво и лесно ... едно изображение, един стилен маркер!

2 Коментари

  1. 1
  2. 2

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.