Подробная статья вот здесь хорошо написанно еще.

Для оформления материалов вебмастера довольно часто используют фоновые изображения. Использование картинки в качестве фона для материала – не только возможность сделать страницу сайта узнаваемой. Картинка может быть просто элементом декора сайта, либо в какой-то мере представлять тему материала. В любом случае использование фонового изображения - хороший способ для реализации дизайнерский замыслов.

Как сделать картинку фоном материала?

Так как многие начинающие вебмастера или малознакомы или совершенно незнакомы с HTML и CSS, я на примере статьи покажу, как можно изменить фон материала. Стиль фона мы будем прописывать непосредственно в материале (в HTML-редакторе). Однако замечу, не смотря на то, что прописанные стили будут работать, старайтесь всё-таки работать по правилам, т.е. стили прописывать в соответствующих файлах CSS. Для начала разберём свойства, которые мы будем использовать для создания стиля фона.

Фон (background)

В CSS фон сайта определяет такое универсальное свойство, как background. Оно позволяет установить одновременно до пяти характеристик фона:
background-image – устанавливает фоновое изображение, в качестве значения используется путь к файлу (url(путь к файлу));

background-position – задаёт начальное положение изображения (left, center, right, top, bottom);

background-attachment – устанавливает, будет ли изображение прокручиваться вместе с документом или займёт фиксированное положение (fixed, scroll, local);

background-repeat – устанавливает как будет повторяться изображение (repeat-x, repeat-y, space, round, no-repeat);

background-color – определяет цвет фона (цвет, transparent, inherit).

Теперь, когда у вас есть набор инструментов, и вы знаете возможности каждого из них, можно приступать к работе.

Пример. Допустим, нам необходимо создать равномерный узорный фон для статьи.

1. Найдём в Интернете небольшую картинку (см. рис) и закачаем её на сайт, к примеру, в папку images. Таким образом url картинки у нас будет images/uzor.png

2. Если не задано начальное положение картинки, по умолчанию картинка будет находиться в левом верхнем углу. Так как это нас вполне устраивает, мы не будем указывать начальное положение картинки, но чтобы замостить узором весь фон, нам нужно указать, чтобы наша картинка повторялась (repeat).

3. И дополнительно укажем, чтобы картинка прокучивалась вместе с документом (scroll).

Теперь наши действия таковы - мы заключаем наш текст в контейнер (div) и прописываем для него стиль (style):

<div style="background-image: url('/images/uzor.jpg');  background-repeat: repeat;  background-attachment: scroll; ">здесь расположен текст нашей статьи</div>

Сокращённая запись кода выглядит так:

<div style="background: url('/images/uzor.jpg') no-repeat scroll;"> здесь расположен текст нашей статьи</div>

В сокращённой записи мы указали свойства background через пробел. Вы можете воспользоваться любой из этих двух записей.

Далее, идём в Административный раздел. В Менеджере материалов открываем статью для редактирования, в редакторе кликаем по значку HTML. Копируем код в нужное место статьи.

взято вот от сюда http://www.webadvisor.ru/kak-sdelat-kartinku-fonom.html