Установить цвет фону можно так:
Вот, что получится:
Чтобы задать фону вместо цвета путь к изображению. Делается это так:
Так у блока появляется фон в виде изображения.
Но оно не масштабировано под размер блока, поэтому нужно добавить в background:
Если Вам нужно растянуть изображение на весь блок, то задача выполнена. Но это не всегда бывает так просто. Иногда необходимо расположить изображение в блоке, при этом не деформируя его.
На примере логотипа:
В этом примере background-position: 50% 50%; устанавливает изображение фона в центр блока. А background-size: 100% auto; растягивает изображение фона на всю ширину блока (высота растягивается пропорционально, не искажая изображение).
Таким образом мы получаем изображение занимающее всю ширину блока, всегда находящегося в центре его(блока).
contain - растянет изображение по высоте, ширину подгонит автоматически
no-repeat - отключит повторение изображение по горизонтали (если оно окажется меньше, чем размер блока)
Спасибо за внимание.
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;} |
Так у блока появляется фон в виде изображения.
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> |
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> |