Background-image

background-image - что такое background-image. Синтаксис background-image - перевод, живые примеры.

Подробно о background-image

1. Что такое "background-image" - перевод/синтаксис
2. Пример "background-image"
3. Пример "background-image" и gradient
4. Пример "background-image" и svg
5. Пример "background-image" + png
6. Пример "background-image" + jpg

Что такое "background-image" - перевод

Прежде чем начинать о "background-image" - нам нужно перевести "background-image" :

background - переводится как "фон"(существительное)

image - изображение(существительное)

Итого у нас получается общий перевод "background-image":

фон картинка.

С переводом "background-image" - надеюсь разобрались, прейдем к синтаксису:

Синтаксис "background-image"

background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*

Расшифровка синтаксиса "background-image"

url - В качестве значения используется путь изображению

none - Отменяет фоновое изображение для элемента.

inherit - Наследует значение родителя.

Примеры синтаксиса "background-image":

background-image: none;

background-image: url(http://example.ru/example.png);

background-image: url(example_1.png), url(example_2.png);

background-image: inherit;




Пример "background-image"

Далее разберем пример использования "background-image" - для этого нам понадобится:

Где-то мы должны разместить нашу картинку на фон... поэтому нам понадобится какой-то элемент "Дома"(Dom) - пусть это будет div

Добавим ему class "example"

<div class=example></div>

Нам потребуется изображение...

Пусть это будет :

https://dwweb.ru/__img/__dates/logo.png

Применим наше свойство "background-image":

background-image: url(https://dwweb.ru/__img/__dates/logo.png);

Соберем весь код примера "background-image"

Html:

<div class=example></div>

Css:

<style>

.example {

background-image: url(https://dwweb.ru/__img/__dates/logo.png);

height: 200px;

}

</style>

Результат использования "background-image"

Вопрос - почему картинка повторяется?

Для того, чтобы отключить повтор картинки нам нужно его отключить!




Пример "background-image" и gradient

В "background-image" не обязательно должна быть картинка.

Разберем пример использования в "background-image" и градиента... нам опять понадобится:

Опять возьмем div

Опять class "example_2"

<div class=example_2></div>

Вместо изображения... поместим туда "background-image" с градиентом... :

background-image: linear-gradient(white, gray);

Соберем код примера "background-image" с градиентом

Html:

<div class=example_2></div>

Css:

<style>

.example2 {

background-image: linear-gradient(white, gray);

height: 200px;

}

</style>

Вывод результата "background-image" + gradient

Бонус :

Еще одни интересный пример : использование "repeating-radial-gradient"

Пример "background-image" + repeating-radial-gradient

.example3 {

background-image: repeating-radial-gradient(circle closest-side at 10px 49px , blue, yellow, green 100%, yellow 150%, red 200%);

height: 200px;

}




Пример "background-image" и svg

Для того, чтобы поставить в "background-image" картинку в формате svg - нам понадобится...

Для примера нам потребуется какой-то блок/элемент Dom'а - путь это будет опять div.

К нему добавим класс "background_image_svg":

<div class=background_image_svg></div>

Пропишем свойства "background-image" к нашему классу:

Для прописывания свойств нам нужна картинка svg - возьмем её отсюда и выведем:



Свойство background-image:

background-image: url(//dwweb.ru/__img/__svg/basket/basket_2.svg);

+ Чтобы svg не повторялся применим background repeat!

Добавим блоку "border" - чтобы мы могли увидеть края блока.

Итого:

.background_image_svg {
background-image: url(//dwweb.ru/__img/__svg/basket/basket_2.svg);
height: 200px;
background-repeat: no-repeat;
border: 1px solid red;
}


Разместим теперь... прямо здесь наш блок с "background-image svg"

Живой пример "background-image svg"




Пример "background-image" + png

Для того, чтобы сделать "background-image png" нам понадобится...

Абсолютно аналогичный алгоритм, что я использовал-зовал выше пунктом...

Создадим элемент Dom'а - это будет опять div.

К нему добавим класс "background_image_png":

<div class=background_image_png></div>

Возьмем картинку отсюда

Css для background_image_png

.background_image_svg {
background-image: url(//dwweb.ru/_data/img/background/winter.png);
height: 200px;
background-repeat: no-repeat;
border: 1px solid red;
}


Выведем пример "background-image png"

Возьмем выше приведенный код и разместим его здесь:




Пример "background-image" + jpg

Вы наверное уже поняли, что создание "background-image" с любым разрешением будет похоже... лишь будет отличаться адрес картинки.

Далее для того, чтобы сделать "background-image jpg" нам понадобится...

Блок div.

К нему добавим класс "background_image_jpg":

<div class=background_image_jpg></div>

Возьмем картинку отсюда

Css для background_image_png

.background_image_svg {
background-image: url(https://dwweb.ru/_data/img/personal/2020_10_15_10_17.jpg);
height: 200px;
background-repeat: no-repeat;
border: 1px solid red;
}


Выведем пример "background-image jpg"

Возьмем выше приведенный код и разместим его здесь: