Главная » Создание сайтов » Верстка » css свойство background

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;

Если какое-то свойство пропускается, то его значение установлено по умолчанию. С уважением, Vasilenko Ivan!
21 октября 2008 в 8:3022 комментария Верстка, ,

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

  1. #1194 sadist в 12:46, 31 мая 2009: (подписался)

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

    volsky_slava@mail.ru

    ---------------------------

    А возможно маленькую картинку растянуть на весь экран? В фоне?

  2. #1208 vanoID в 17:33, 31 мая 2009:

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

    поставь width и height на 100%

  3. #1212 sadist в 18:52, 31 мая 2009: (подписался)

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

    Спасибо)))

  4. #4973 Mark в 21:26, 4 сентября 2009:

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

    У меня есть вопрос. Как поставить картинку в полный экран? Распишите мне плиз по тегам.

    Заранее спасибо.

  5. #5006 WebMast в 7:05, 5 сентября 2009:

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

    Хм... Если я правильно понял, то вам нужно картинку на фоне на весь экран?

    Пропишите в CSS:

    body{background:transparent url («{img}») no-repeat fixed center top;}

  6. #6344 Максим в 13:44, 28 сентября 2009:

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

    А как в этом случае растянуть картинку?

    Подскажите пожалуйста...

  7. #6346 Максим в 13:45, 28 сентября 2009:

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

    body style="backgroundimage: url('img'); margin:0px; padding:0px;"

  8. #6358 WebMast в 19:49, 28 сентября 2009:

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

    Максим, по моему, тебе нужно вот это: masshtabiruemaya-kartinka-na-fone-sajta-ili-rezinovyj-fon.

  9. #7701 dark_hero в 13:12, 30 октября 2009:

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

    вот тут еще побольше написано на эту тему и примеры есть фон для сайта

  10. #7813 Andrew в 14:41, 1 ноября 2009:

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

    Спасибо автору. Это именно то, что я и искал.

    У меня была проблема с закреплением заднего фона и не повторением его. Если интересно, то через пару дней я установлю фон на сайте. ЗАходите заценить)))

  11. #8603 Санек в 22:58, 8 декабря 2009: (подписался)

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

    А как можно сделать переливающйся фон, ну например вверху сайта темный а к низу чтобы светлее был?

  12. #8613 WebMast в 8:03, 9 декабря 2009:

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

    Рисуй в графическом редакторе фон. Затем прописывай его в свойстве background для тега body.

  13. #8614 Санек в 8:41, 9 декабря 2009: (подписался)

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

    хороший такой ответ.

  14. #8615 Санек в 8:42, 9 декабря 2009: (подписался)

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

    и на том спасибо.гг

  15. #9219 Acden.ru в 23:27, 8 января 2010: (подписался)

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

    1. Нарисуйте рисунок градиентом (т.е. цвета сверху вниз).

    2. Затем на нужный элемент сделайте background:url («kartinka.jpg»);

    Если что — пишите.

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

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

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

    если что пишите на мыло

    new-diablo@mail.ru

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

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

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

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

    В CSS

    /* General Style */

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

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

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

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

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

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

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

  21. александр,

    #contanier {background:url (ion-sot.3dn.ru/zamok_molnija.gif) no-repeat 50% 50% }

    или, если не поможет, bitby.net/webdev/masshtab...i-rezinovyj-fon/

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

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя