Как исправить баг с пропаданием части фона?

Question

[uzi_no_uzi]

<section>
  <div></div>
</section>

section {
  padding: 20px;
  width: 100%;
}

div {
  width: 100%;
  background-image: url('https://svgshare.com/i/6RG.svg');
  height: 32px;
  background-repeat: no-repeat;
  background-size: cover;
}

Сниппет: https://codepen.io/anon/pen/RyRBLQ

Пропадает часть фона, если изменить свойство

background-position

, то фон пропадает с другой стороны, если указать

background-size: 100% 100%

, фон просто растягивается на всю свою ширину, но не покрывает весь блок, как исправить?

Должно быть вот так:

В чем может быть проблема, уже второй день ломаю голову.

Answer 1

[Александр]

А если так ?

<section>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1"  x="0px" y="0px" viewBox="0 0 1000 32" enable-background="new 0 0 1000 32" xml:space="preserve">
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="0" y1="0" x2="484.8" y2="0"/>
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="484.8" y1="0" x2="500" y2="32"/>
       <line fill="none" stroke="#000000" stroke-miterlimit="10" x1="500" y1="32" x2="1000" y2="32"/>
    </svg>
  </div>
  
</section>

Comments

[uzi_no_uzi]

При уменьшении экрана вообще интересные вещи происходят)

[Александр]

uzi_no_uzi, что именно ? вы наверное забыли убрать background у div )

[uzi_no_uzi]

Александр, Действительно, я что-то был не так сделал, спасибо за решение!

Answer 2

[inkShio]

У тебя фон растягивается. Меняется высота картинки. А она у тебя фиксированная. Все что не входит в 32px скрывается.

Comments

[uzi_no_uzi]

Что нужно делать в таком случаи?

[inkShio]

Смотря какая у тебя задача. Мб тебе этот вариант вообще не подходит.

[uzi_no_uzi]

inkShio, Нужно что бы фон растягивался на всю ширину блока и при этом не скрывался.