Установите inline-svg в качестве фона div

Question

Я получил место в моей CSS-сетке, где я вставляю абзац длиной около 15 символов, я хотел бы добавить элемент фона и я хочу, чтобы он имел некоторую индивидуальность, поэтому я использую встроенный SVG-контент.

Я пытался разместить его на bottom с position:relative, но когда вы меняете размер порта просмотра, он плохо масштабируется. Я завернул код SVG в контейнер:

.marquee-container {
    height: 0;
    position: absolute;
    width: 500px;
}

И стили SVG:

.svg-marquee {
    fill: teal;
    stroke-width: 4;
    stroke-miterlimit: 10;
    cursor: pointer;
    transition: .5s;
}

Это HTML-разметка

<div class="home-works">
    <div class="head">
        <h1>Entries</h1>
    </div>
    <img class="thumbnail" src="img/profile-picture.png" width="100%"/>
    <div class="main-content">                
        <div class="marquee-container">
            <svg version="1.1"
                        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
                        x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;"
                        xml:space="preserve">
                            <path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
                            C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
            </svg>
        </div>
        <div class="post">
            <h3>title</h3>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat
                                maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
            </p>
        </div>
    </div>
</div>  

Мой товарнаходится внутри CSS Grid Layout, где post - это класс, который я использую для стилизации содержимого абзаца. Который не находится внутри grid-template-areas, это просто класс в области, уже определенной.

.post {
    text-align: left;
    position: relative;
    z-index: 1;
}

Так что масштабирование не идет хорошо, я хотел бы поместить элемент на заднем плане абзаца, который будет содержаться, каков наилучший подход?

.marquee-container {
  height: 0;
  position: absolute;
  width: 500px;
}

.svg-marquee {
  fill: teal;
  stroke-width: 4;
  stroke-miterlimit: 10;
  cursor: pointer;
  transition: .5s;
}

.post {
  text-align: left;
  position: relative;
  z-index: 1;
}

<div class="home-works">

  <div class="head">
    <h1>Entries</h1>
  </div>
  <img class="thumbnail" src="img/profile-picture.png" width="100%" />
  <div class="main-content">

    <div class="marquee-container">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
                            <path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
                            C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
                    </svg>
    </div>
    <div class="post">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
      </p>
    </div>
  </div>
</div>

Answer 1

Поскольку вы позиционируете .marquee-container абсолютно. Вам нужно, чтобы родитель имел положение, установленное на relative, поэтому добавьте position: relative на родителя .main-content.

Я не понимаю, почему вы установили высоту .marquee-container на 0. Я бы посоветовал установить height на auto и иметь bottom: 0;, (как вы хотели, чтобы он был выровнен по дну контейнера).

Установите width на 100%, так какВы хотите, чтобы это было масштабируемым. также добавьте отрицательное значение z-index, чтобы элемент не закрывал содержимое.

Проверьте фрагмент кода ниже.

.main-content {
  position: relative;
}
.marquee-container {
  position: absolute;
  bottom: 0;
  height: auto;
  width: 100%;
  z-index: -5;
}

.svg-marquee {
  fill: teal;
  stroke-width: 4;
  stroke-miterlimit: 10;
  cursor: pointer;
  transition: .5s;
}

.post {
  text-align: left;
  position: relative;
  z-index: 1;
}

<div class="home-works">

  <div class="head">
    <h1>Entries</h1>
  </div>
  <img class="thumbnail" src="img/profile-picture.png" width="100%" />
  <div class="main-content">

    <div class="marquee-container">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" viewBox="0 0 634 175" style="enable-background:new 0 0 634 175;" xml:space="preserve">
                            <path class="svg-marquee" d="M595.9,173C317,173,317,153,38.1,153C27.3,153,2,157.6,2,151C2,87.5,34.8,87.5,34.8,24c0-6.6-7.5-22,3.3-22
                            C317,2,317,22,595.9,22c10.8,0,36.1-4.6,36.1,2c0,63.5-32.8,63.5-32.8,127C599.2,157.6,606.7,173,595.9,173z"/>
                    </svg>
    </div>
    <div class="post">
      <h3>title</h3>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore placeat maiores ad ullam illo, blanditiis ipsam libero! Aspernatur, mollitia suscipit?
      </p>
    </div>
  </div>
</div>