Воскресенье, 23 Июнь 2013 19:31

Как вставить картинку в фон страницы

Оцените материал
(10 голосов)

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

Варианты расположения изображения

По центру: <div style="background: url('/images/voyage.gif') center no-repeat scroll;">Текст</div>

Внизу: <div style="background: url('/images/voyage.gif')&nbsp;bottom&nbsp;no-repeat scroll;">Текст</div>

Вверху: <div style="background: url('/images/voyage.gif') top&nbsp;no-repeat scroll;">Текст</div>

С поворотом: <div style="background: url('/images/voyage.gif')&nbsp;repeat scroll;">Текст</div>

Вверху с права: <div style="background: url('/images/voyage.gif') top right no-repeat scroll;">Текст</div>

Вверху с лева: <div style="background: url('/images/voyage.gif') top left no-repeat scroll;">Текст</div>

Внизу с права: <div style="background: url('/images/voyage.gif') bottom right no-repeat scroll;">Текст</div>

Внизу с лева: <div style="background: url('/images/voyage.gif') bottom left no-repeat scroll;">Текст</div>

Если Вы хотите, чтобы изображение повторилось многократно, то просто уберите в теге «no-reperat» приставку «no»

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

 

Если у Вас возникли какие либо сложности, то Вы можете написать мне через службу техподдержки, кнопка которой находится в верхнем меню сайта. Желаю всем Вам Успехов!!! С Уважением Bumer!

 

 

Последнее изменение Среда, 14 Август 2013 22:33
Новые игры Alawar.