Как в css сделать фоном картинку для всего сайта


  • всего  

     

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


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

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



    Облако тегов



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


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

    Подключение второго монитора. Переключение между Пошить пляжную сумку своими руками выкройки

    Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта Как в css сделать фоном картинку для всего сайта

    Похожие новости