Как сделать картинку фоном

Оцените материал
(0 голосов)

Здравствуйте! В прошлом уроке мы с Вами разбирались с размерами элементов, а в это мы поговорим о фоне элемента. Фон элемента описывается в CSS свойством background. Фактически это свойство представляет сокращение набора следующих свойств CSS:

  • background-color: устанавливает цвет фона

    background-color: #ff0507;
    
  • background-image: в качестве фона устанавливается изображение

    background-image: url(dubi.png);
    

    Это свойство принимает одно значение: ключевое слово url, после которого в скобках идет путь к файлу изображения. В данном случае имеется в виду, что в одной папке рядом с веб-страницей находится файл dubi.png.

    Также можно использовать абсолютные адреса URL, например:

    background-image: url(http://localhost.com/someimage.png);
    

    Либо можно использовать относительные адреса - относительно html-документа или корневого каталога сайта:

    background-image: url(../images/someimage.png); /* путь относительно html-документа */
    
  • background-repeat: устанавливает режим повторения фонового изображения по всей поверхности элемента

  • background-size: устанавливает размер фонового изображения

  • background-position: указывает позицию фонового изображения

  • background-attachment: устанавливает стиль прикрепления фонового изображения к элементу

  • background-clip: определяет область, которая вырезается из изображения и используется в качестве фона

  • background-origin: устанавливает начальную позицию фонового изображения

 

 Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
        div{
            width: 250px;
            height: 200px;
            margin: 10px;
        }
         
        .colored{
            background-color: #ff0507;
        }
         
        .imaged{
            background-image: url(dubi.png);
        }
        </style>
    </head>
    <body>
        <div class="colored">Первый блок</div>
        <div class="imaged">Второй блок</div>
    </body>
</html>

Просмотреть  пример

Повторение изображения

На выше приведенном примере, видно что CSS должным образом масштабирует изображение, чтобы наиболее оптимально вписать его в пространство элемента. Однако в связи с масшатбированием изображение может не полностью покрывать поверхность элемента, и поэтому для полного покрытия автоматически CSS начинает повторять изображение.

С помощью свойства background-repeat можно изменить механизм повторения. Оно может принимать следующие значения:

  • repeat-x: повторение по горизонтали

  • repeat-y: повторение по вертикали

  • repeat: повторение по обеим сторонам (действие по умолчанию)

  • space: изображение повторяется для заполнения всей поверхности элемента, но без создания фрагментов

  • round: изображение должным образом масштабируется для полного заполнения всего пространства

  • no-repeat: изображение не повторяется

Например:

div{
    width: 200px;
    height: 150px;
             
    background-image: url(dubi.png);
    background-repeat: round;
}

Размер изображения

Свойство background-size позволяет установить размер фонового изображения. Для установки размера можно использовать либо единицы измерения, например, пиксели, либо проценты, либо одно из предустановленных значений:

  • contain: масштабирует изображение по наибольшей стороне, сохраняя аспектное отношение

  • cover: масштабирует изображение по наименьшей стороне, сохраняя аспектное отношение

  • auto: значение по умолчанию, изображение отображается в полный размер

Если нужно масштабировать изображение таким образом, чтобы оно оптимальнее было вписано в фон, то для обеих настроек можно установить значение 100%:

background-size: 100% 100%;

Если задаются точные размеры, то вначале указывается ширина, а потом высота изображения:

background-size: 200px 150px;   /* ширина 200 пикселей, высота 150 пикселей */

Можно задать точное значение для одного измерения - ширины или высоты, а для другого задать автоматические размеры, чтобы браузер сам выводил точные значения:

background-size: 200px auto;    /* ширина 200 пикселей, автоматическая высота */

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
        div{
            width: 200px;
            height: 150px;
            margin: 10px;
             
            border: black solid 1px;
            background-image: url(dubi.png);
             
        }
        .imaged1{
             
            background-size: cover;
        }
        .imaged2{
             
            background-size: 140px 110px;
        }
        </style>
    </head>
    <body>
        <div class="imaged1"></div>
        <div class="imaged2"></div>
    </body>
</html>

Просмотреть  пример

Во втором случае изображение будет масштабироваться до размеров 140х110. Поскольку у нас еще остается место на элементе, то по умолчанию изображение будет повторяться для заполнения всей поверхности.

Позиция изображения

Свойство background-position управляет позицией фонового изображения внутри элемента. Оно может принимать отступы от верхнего левого угла элемента в единицах измерения, например, в пикселях в следующем формате:

background-position: отступ_по_оси_X  отступ_по_оси_Y;  

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
        div{
            width: 300px;
            height: 250px;
            margin: 10px;
             
            border: 1px solid #ccc;
            background-color: #eee;
            background-image: url(img/phone-touch.png);
            background-repeat: no-repeat;
            background-position: 20px 15px;
        }
        </style>
    </head>
    <body>
        <div>Туман начинал расходиться, и неопределенно, верстах в двух расстояния, виднелись уже неприятельские
            войска на противоположных возвышенностях...</div>
    </body>
</html>

Просмотреть  пример

Кроме того, данное свойство может принимать одно из следующих значений:

  • top: выравнивание по верхнему краю элемента

  • left: выравнивание по левому краю элемента

  • right: выравнивание по правому краю элемента

  • bottom: выравнивание по нижнему краю элемента

  • center: изображение располагается по центру элемента

Например:

background-position: top right;

Здесь изображение выравнивается по верху и правому краю, то есть будет располагаться в правом верхнем углу элемента.

background-attachment

Свойство background-attachment управляет, как фоновое изображение будет прикреплено к элементу. Это свойство может принимать следующие значения:

  • fixed: фон элемента фиксирован вне зависимости от прокрутки внутри элемента

  • local: по мере прокрутки внутри элемента фон изменяется

  • scroll: фон фиксирован и не меняется при прокрутке, но в отличие от fixed несколько элементов могут использовать свой фон, тогда как при fixed создается один фон для всех элементов

Например:

div{
    width: 300px;
    height: 250px;
     
             
    overflow:scroll;    /* добавляем прокрутку  */
    border: 1px solid #ccc;
     
    background-image: url(dubi.png);
    background-size: 512px 384px;
    background-attachment: scroll;
    background-repeat: no-repeat;
}

background-origin

Свойство background-origin указывает позицию на изображении, с которой будет начинаться собственно фоновое изображение для элемента. Оно может принимать следующие значения:

  • border-box: фон у элемента устанавливается начиная с его внешней границы, определяемой свойством border

  • padding-box: фон устанавливается с учетом внутренних отступов

  • content-box: фон устанавливается по содержимому элемента

Используем все три значения:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Блочная модель в CSS3</title>
        <style>
        div{
            width: 200px;
            height: 200px;
            margin: 10px;
            display: inline-block;  /* располагаем блоки в ряд */
            color: #eee;
             
            padding:15px;
            border: 15px solid rgba(23,23,23,0.2);
             
            background-image: url(img/phone-touch.jpg);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .borderBox {background-origin: border-box;}
        .paddingBox {background-origin: padding-box;}
        .contentBox {background-origin: content-box;}
        </style>
    </head>
    <body>
        <div class="borderBox">
            Вся власть - котикам!
        </div>
        <div class="paddingBox">
            Вся власть - котикам!
        </div>
        <div  class="contentBox">
            Вся власть - котикам!
        </div>
    </body>
</html>

Просмотреть  пример

background-clip

Свойство background-clip определяет, какая часть изображения используется для фона. Он принимает те же значения:

  • border-box: изображение обрезается по границам элемента

  • padding-box: из изображения исключается так часть, которая находится под границами элемента

  • content-box: изображение обрезается по содержимому с учетом внутренних отступов

Например, если к предыдущей разметке мы применим следующие стили:

div{
    width: 200px;
    height: 200px;
    margin: 10px;
    display: inline-block;
             
    color: #eee;
    padding:15px;
    border: 15px solid rgba(23,23,23,0.1);
             
    background-image: url(cats.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
.borderBox{background-clip: border-box;}
.paddingBox{background-clip: padding-box;}
.contentBox{background-clip: content-box;}

Тогда мы получим следующий результат:

Свойство background

Свойство background по сути является сокращением всех ранее рассмотренных свойств CSS в формате:

background: <background-color> <background-position> <background-size>
<background-repeat> <background-origin> <background-clip> <background-attachment>
<background-image>

Например, если у нас есть следующий набор свойств:

background-image: url(cats.jpg);
background-color: #eee;
background-repeat: no-repeat;
background-clip: border-box;
background-origin: border-box;
background-attachment: local;

То мы их можем сократить следующим образом:

background: #eee no-repeat border-box local url(cats.jpg);

Прочитано 3829 раз Последнее изменение Воскресенье, 20 ноября 2016 16:54
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

Поиск по сайту

Связной трэвел

Google+