Как изменить фон элемента. Все о Background

Установить цвет фону можно так:
1
2
3
4
5
6
7
8
<style>
    .my_background{
        background:red;
        width:200px;
        height:100px;
    }
</style>
<div class='my_background'></div>
Вот, что получится:

Чтобы задать фону вместо цвета путь к изображению. Делается это так:
1
2
3
4
5
.my_background_image{
  background:url(/images/logo_v2.png);
  width:200px;
  height:100px;
}

Так у блока появляется фон в виде изображения.
Но оно не масштабировано под размер блока, поэтому нужно добавить в background:
1
2
background:url(/images/logo_v2.png);
background-size:100% 100%; //по ширине и высоте

Если Вам нужно растянуть изображение на весь блок, то задача выполнена. Но это не всегда бывает так просто. Иногда необходимо расположить изображение в блоке, при этом не деформируя его. На примере логотипа:
1
2
3
4
5
6
7
8
9
10
<style>
.my_background_image_reposition{
    background:url(/images/logo_v2.png);
    background-position: 50% 50%;
    background-size: 100% auto;
    width:200px;
    height:100px;
}
</style>
<div class="my_background_image_reposition"></div>
В этом примере background-position: 50% 50%; устанавливает изображение фона в центр блока. А background-size: 100% auto; растягивает изображение фона на всю ширину блока (высота растягивается пропорционально, не искажая изображение). Таким образом мы получаем изображение занимающее всю ширину блока, всегда находящегося в центре его(блока).

1
2
3
4
5
6
7
8
9
10
<style>
.my_background_image_contain{
    background:url(/images/logo_v2.png) no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    width:200px;
    height:100px;
}
</style>
<div class="my_background_image_contain"></div>
contain - растянет изображение по высоте, ширину подгонит автоматически no-repeat - отключит повторение изображение по горизонтали (если оно окажется меньше, чем размер блока) Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru