Как создать сайт

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

Здравствуйте! В прошлом уроке мы с Вами разбирались с размерами элементов, а в это мы поговорим о фоне элемента. Фон элемента описывается в 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: изображение обрезается по содержимому с учетом внутренних отступов
Читайте также  Прокрутка элементов CSS

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

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);

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/u92rw0kUxRo” frameborder=”0″ gesture=”media” allow=”encrypted-media” allowfullscreen></iframe>

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Оставить ответ

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: