Привет всем.
Есть вот такая html структура
<div class="col-md-3">
<div class="red__block_wrapper">
<div class="red__block">
<div class="red__block__logo"></div>
</div>
</div>
</div>
И css стили
.red__block_wrapper{
background: #ad000b;
}
.red__block{
height: 250px;
width: 250px;
}
.red__block__logo{
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21000 29700" fill="#ad000b"><defs><style type="text/css">@font-face { font-family:"Antiqua";font-variant:normal;font-style:normal;font-weight:normal;src:url("#FontID0") format(svg)}.fil0 {fill:#fffff5}.fnt1 {font-weight:normal;font-size:1180.53px;font-family:'Antiqua'}.fnt0 {font-weight:normal;font-size:1697.53px;font-family:'Antiqua'}</style></defs><text x="3718" y="12057" class="fnt0">Текст</text><text x="3662" y="14610" class="fnt1"> Текст</text><text x="3662" y="15925" class="fnt1">Текст</text><rect x="964" y="10083"/><polygon class="fil0" points="3096 13465 3039 13773 3340 14105 3126 15584 3214 16254 2264 13615 "/><polygon class="fil0" points="2027 14957 2184 14668 2373 14969 "/><path class="fil0" d="M3438 10501c-156-48-148-11-263-31-8-1 33 78 25 77-8-1-63-35-72-36-7-1 21 46 12 46-170-7-557 145-635 290-96 179-84 427-84 562 51 19 58 183 40 228 1-36-10-87-31-134-17-40-108-97-100 206 2 75 50 200 58 257 31 237 54 185 114 174-2 146 65 455 65 455 18 113 438 399 629 475 191 76 292 60 292 60l-51-2628z"/></svg>');
background-repeat: no-repeat;
}
Такая проблема, что блок с картинкой, не принимает размеры родительского блока => картинка не отображается. Хотя до этого указывал blockname в него пихал блок которому инлайном задавал background , как здесь, и картинка корректно отображалась. Заранее спасибо. Если даю высоту картинки, то она растягивает всю страницу т.е сам блок становиться например 250px, но картинка намного меньше.
Простой
Средний
