Фон для сайта (свойство CSS background) - 27 Сентября 2012 - Скрипты для юкоз - TOP-PARTYDIP
Главная » 2012 » Сентябрь » 27 » Фон для сайта (свойство CSS background)

11:19
Фон для сайта (свойство 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, дальше вас ожидает еще много интересных секретов!

Просмотров: 570 | Добавил: TOP-PARTYDIP | Рейтинг: 5.0/1
Всего комментариев: 0
Войдите:
avatar
мини-профиль
16:52
Вы вошли как: Гость
Группа
TOP 50
Counter-Strike [18]
Clans / Клан [8]
Ultima Online [0]
Team Fortress 2 [0]
World of Warcraft [0]
Lineage II [0]
Minecraft [3]
Mu Online [0]
Kino Online [1]
Grand Theft Auto [0]
Perfect World [0]
Online games [0]
Torrent Trackers [0]
OSI [1]
Blogs [0]
i-Radio [1]
Vk groups [0]
Развлечения / entertainment [1]
Интернет магазины / online Stores [0]
Интернет заработок / online earnings [0]
Системы рейтинга / rating System [2]
Бизнес / business [1]
Ucoz [3]
Other [2]
Kino Online [0]
Разная музыка
Дата добавления:11.09.2012
Shakira - La Tortura
Комментариев 0
  
Поиск
Календарь
«  Сентябрь 2012  »
ПнВтСрЧтПтСбВс
     12
3456789
10111213141516
17181920212223
24252627282930
New CS servera
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Нас посетили
Топ пользователей
CS 1.6
Download Counter Strike 1.6 (48p)
Наш опрос
Надо "Регистрация" на сайте, чтоб добавить сайт в топ?
Результаты | Архив опросов
Всего ответов: 45
Новые Пользователи
markussd1999!
1
alimisujith!
2
eusludinajumi!
3
weFF!
4
Kaimins!
5
oneloveonecow!
6
Dj-TeReX!
7
egis21!
8
smibo96!
9
cyxapuk!
10
serega_zaec!
11
m1nd!
12
Архив записей