css свойство background

html_css_webaf, css свойство background

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

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

background-color — задает цвет фона. Можно применять к отдельным элементам (например div) или ко всему сайту через через тэг <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 — используемое в предыдущем примере изображение будет повторяется по всему экрану. Данное свойство (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: #fff url(«my-image.jpg») no-repeat fixed left bottom;

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

21 октября 2008 в 8:3022 комментария Верстка, ,

Комментарии — 22 комментария

  1. #9633 Дмитрий в 14:49, 27 апреля 2010:

    Ответить | Цитировать

    А если background использовать не в CSS а в HTML как там зделать так что-бы картинка была определенного размера

    если что пишите на мыло
    new-diablo@mail.ru

  2. […] создании сайта, вам обязательно необходимо подобрать фон для сайта, который бы максимально подходил как по дизайну, так и […]

  3. #10714 александр в 23:01, 16 ноября 2010: (подписался)

    Ответить | Цитировать

    помагите всю голову уже сломал не могу растинуть картинку на весь сайт чтоб она бала одна не всех страницах одна а ни много
    В CSS
    /* General Style */

    #contanier {background:url(http://ion-sot.3dn.ru/zamok_molnija.gif) }

    что и куда надо вставить она должна быть одна на весь экран

    помагите плиз

  4. […] еще и input. Вписываем определенный слова перед css background и все, дальше только начинять их by […]

  5. #11153 Илья в 11:37, 23 марта 2011: (подписался)

    Ответить | Цитировать

    А что делать если картинка большая а её надо уменьшить? У меня такой фон, что там 2 полоски по краям от блоков, а из-за размера там одна полоска посередине страницы идет=( подскажите где и что прописывать?

  6. александр,
    #contanier {background:url (ion-sot.3dn.ru/zamok_molnija.gif) no-repeat 50% 50% }
    или, если не поможет, https://bitby.net/webdev/masshtabiruemaya-kartinka-na-fone-sajta-ili-rezinovyj-fon/

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting