css - 绝对响应图像背景

Question

由于背景图像在页脚中的位置，我有一个小问题。

正如您在图片上看到的那样，我当前的背景图像(带球的绿色虚线 - 它是 svg 图像)位于页脚的中间。

我想把它放在红线的位置，在调整窗口大小时留在那里。它的代码是:

footer{
  position: relative;
  
  /* START OF IMAGE BG */
  &:before{
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/wp-content/themes/company/static/img/line.svg");
    -moz-background-size:90%;
    background-size:90%;
    background-repeat: no-repeat;
  }
  /* END OF IMG BG */  
  
  padding: rem-calc(45 20);
  @media #{$medium-up}{
    padding: rem-calc(85);
  }
  background-color: $bluedark;
  color: $white;
  min-height: rem-calc(500);
  p{
    font-size: rem-calc(12);
    @media #{$medium-up}{
      font-size: rem-calc(16);
    }
    font-weight: 300;
    &.section-header{
      text-transform: uppercase;
      font-weight: 600;
    }
    &.bold{
      font-weight: 600;
    }
    &.green{
      color: $green;
    }
  }
  .social-media{
    img{
      display: inline-block;
      margin: rem-calc(0 5 20 5);
      max-height: rem-calc(20);
      @media #{$medium-up}{
        max-height: rem-calc(40);
      }
    }
  }
  .underline{
    margin-top: rem-calc(50);
    border-top: 1px solid $bluegrey;
    padding-top: rem-calc(20);
    .logo{
      float: left;

      width: rem-calc(200);
      height: rem-calc(45);
      background: url("/wp-content/themes/company/static/img/logo_light.svg");
      background-size: contain;
      background-repeat: no-repeat;
    }
    select{
      float: right;
    }
  }
}

而 html 是:

<footer>
<div class="line"></div>
<div class="flex">
    <div class="row">
        <div class="large-3 columns">
            <p class="section-header">O nas</p>
            <p>O Firmie</p>
            <p>Zespół</p>
            <p class="green">Blog</p>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Pomoc</p>
            <p>FAQ</p>
            <p>Regulamin</p>
            <p>Polityka prywatności</p>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Social Media</p>
            <div class="social-media">
                <img src="{{site.theme.link}}/static/img/social-media/facebook.png">
                <img src="{{site.theme.link}}/static/img/social-media/twitter.png">
                <img src="{{site.theme.link}}/static/img/social-media/instagram.png">
            </div>
        </div>
        <div class="large-3 columns">
            <p class="section-header">Kontrakt</p>
            <div class="button green">Formularz kontaktowy</div>
        </div>
    </div>
    <div class="row underline">
        <div class="logo"></div><span>
        <select>
          <option value="Polski">Polski</option>
          <option value="English">English</option>
        </select>
    </div>
</div>

我知道由于 top:0 而放置错误，但是我不知道如何让它保持在页脚的顶部边框上。

如有任何帮助，我将不胜感激。

Answer 1

你的一个类似的例子，我认为它对你的目的有用:

  div {
    border: solid 1px green;
    margin-bottom: 20px;
  }
  
  footer {
    position: relative;
    height: 50px;
    background-color: red;
    text-align: center;
    padding-top: 20px;
  }
  
  footer:before {
    content: "";
    position: absolute;
    display: block;
    top: -50%;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("http://www.curtainshopsouthport.co.uk/scissors.png");
    -moz-background-size: 90%;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: left 50%;
  }

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quis placeat architecto dolore recusandae nam amet, voluptate consequatur tenetur, quibusdam cupiditate culpa perferendis praesentium ab quasi voluptatum doloremque illum suscipit ea. Placeat
  aperiam tempore maiores minus harum sint debitis beatae sit, eos voluptas est temporibus animi ullam praesentium voluptates molestiae dolore illo officiis blanditiis dolores. Qui labore asperiores quia dolore amet, culpa consectetur est quibusdam iusto
  incidunt maxime aliquid sit eius explicabo aut, possimus corporis temporibus. Alias officia libero repellat veritatis, obcaecati repudiandae at voluptas, maxime doloremque facilis, sunt praesentium voluptatibus eaque provident natus, earum asperiores?
  Possimus voluptatem, soluta deserunt.</div>
<footer>footer</footer>