0

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;
}
<section>
  <div></div>
</section>

введите сюда описание изображения

Пропадает часть фона, если изменить свойство background-position, то фон пропадает с другой стороны, если указать background-size: 100% 100%, фон просто растягивается на всю свою ширину, но не покрывает весь блок, как исправить?

1
  • там эта фигура на line сделана , нарисовать в polygon можете ? или вообще маской ещё проще будет
    – user33274
    24 апр 2018 в 22:02

1 ответ 1

0

У этого метода один минус - svg не тянется в след за foreignObject

svg{
  display:block;
  width:80%;
  margin:1vh  auto;
}

.svg-item {
  width: 900px;
  margin: 80px;
}

.svg-item p {
  font-size: 1.4em;
}

.svg-item img {
  width: 90%;
  height: 290px;
  margin: 0 50px;
}
<svg viewBox="0 0 1000 500">
      <text x="80" y="45" fill="blue" style="font-size:1.4em;font-variant:small-caps;">the girl of my life on the beach</text>
      <foreignObject  class="loaderForeighObject" width="900" height="300">
        <body xmlns="http://www.w3.org/1999/xhtml" class="fbody">
          
          <div class="svg-item">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque necessitatibus incidunt nesciunt illo iure? Explicabo suscipit voluptatibus itaque, facere cupiditate odio officiis numquam fugiat illo sed nulla dolores debitis porro. </p>
            <img src="http://svoya.ucoz.ru/_ph/3/942254958.jpg" alt="">
          </div>      
        </body>
      </foreignObject>
  <polygon points="0,0 500,0 520,50 1000,50 1000,500 0,500" style="fill:transparent;stroke:#000; stroke-width:2px;"/>
</svg>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.