Установить рисунок на фон

 

Скачать

 

Фон для сайта (свойство CSS background)Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.

Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость фона как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:

Background-color

Задает цвет фона. Можно применять к отдельным элементам <h1>, <p> или ко всему сайту через через тэг <body>:

/ черный фон сайта / body { background-color: #000; } / черный фон заголовка, белый цвет шрифта / h1 { color: #fff; background-color: #000; }

/ черный фон сайта / body { background-color: #000; } / черный фон заголовка, белый цвет шрифта / h1 { color: #fff; background-color: #000; }

Background-image

Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:

body { background-color: #000; background-image: url ("my-image.jpg"); }

body { background-color: #000; background-image: url ("my-image.jpg"); }

Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать правильный путь к изображению.

Background-size

Определяет размер фонового изображения.

div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat; }

div { background: url(my-image.jpg); background-size: 100% 100%; background-repeat: no-repeat; }

Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.

Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.

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;

background: #000 url("my-image.jpg") no-repeat fixed left bottom;

Если какое-то свойство пропускается, то его значение установлено по умолчанию.

Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!


Комментариев - 82 для поста Фон для сайта (свойство CSS background)

Оставить комментарий
для статьи Фон для сайта (свойство CSS background)


Облако тегов



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Как сделать картинку фоном в html, код, примеры, background, image Рисунок месяца марта


Установить рисунок на фон Установить рисунок на фон Установить рисунок на фон Установить рисунок на фон Установить рисунок на фон Установить рисунок на фон