Фон для сайта (свойство CSS background)
Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
background-color – задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:
/* черный фон сайта */ body { background-color: #000; } /* черный фон заголовка, белый цвет шрифта */ h1 { color: #fff; background-color: #000; }
background-image – используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
body { background-color: #000; background-image: url ("my-image.jpg"); }
Обратите внимание как указан путь к изображению – это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.
background-repeat – используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:
- background-repeat: repeat-x – изображение повторяется только по горизонтали
- background-repeat: repeat-y – изображение повторяется только по вертикали
- background-repeat: repeat – изображение повторяется по горизонтали и вертикали
- background-repeat: no-repeat – изображение не повторяется
background-attachment – данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
- background-attachment: scroll – прокручивается вместе со страницей
- background-attachment: fixed – при прокрутке фон остается неподвижным
background-position – задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
- в фиксированных единицах (пикселы, сантиметры)
- в процентах
- словесно: – top (сверху), bottom (снизу), center (по центру), left (слева) и right (справа).
Рассмотрим примеры:
- background-position: 20px 50px – изображение отступает вниз на 20 пикселей сверху и вправо на 50 от левого края.
- background-position: 50% 25% – расположено по центру по горизонтали и отступает на 25% сверху.
- background-position: right bottom – рисунок располагается снизу справа.
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
Например:
background: #000 url("my-image.jpg") no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!
RSS
Email
twitter
Loading ...
background-position: bottom right – в этой cтроке ошибка;)
Денис, спасибо, исправил:)
url(”my-image.jpg “)
Из-за этого пробела Ослик может “забыть” показать картинку.
Ох уж этот осел:) Дмитрий, спасибо за наводку, подправил код.
Очень даже пригодился данный урок. Благодарю! ;)
Интересно, а какое само было изображение?! Хотелось бы тоже увидеть его))
Если вы о данном блоге, то изображение:
body {background:#2765AF url(’../images/body_bg.jpg’) repeat-x 0 0; color:#000000; margin:20px 0; padding:0; font-family:”Trebuchet MS”, verdana, arial, “Times New Roman”, serif; font-size:90%; }
p {margin:0; padding:0 0 15px 0; }
a {color:#000000; text-decoration:underline; }
a:hover {color:#225799; text-decoration:none;}
Подскажите, пожалуйста, никак не получается, сделать. Хочу, чтобы одно изображение заканчивалось, а второе изображение заливала все остальное. А получается сначала изображение на пол экрана, а дальше цвет.
garik, насколько мне известно, 2 изображения добавить никак не получится, разве что уже через HTML – создаешь разные слои и для каждого определяешь фон.
Делаем бэкграунд для body одним изображением (которое будет ниже), потом делаем тег div , ширина 100%, бэкграунд первое изображение (которое сверху), и уже в этот div размещаем все остальное содержимое.
Здравствуйте, а как подписаться на rss у Вас?=)
Олями,кликнуть на большую черную иконку в верхнем правом углу сайта.
Спасибо, мне очень понравился ваш сайт
Классно, мне понравилось меню ваше горизонтальное, как его сделать?
Можешь скачать шаблон, который у меня (ссылка внизу блога) и посмотреть код.
Добрый день всем!
Как сделать так, чтобы на заднем фоне флэха была. У меня сейчас сделана картинка в *jpg, а хочу *swf. Но когда это делаю, то swf’ка выше всего начинает отрисовываться, что не очень красиво, а задний фон становится чёрным, как в css и задано.
Спасибо, прекрасный блог о дизайне