绝对响应式图像背景

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>

Answer 2

只要您没有overflow 问题，您只需将top:0 替换为bottom:100%

footer{
  position: relative;
  &:before{
    content: "";
    position: absolute;
    display: block;
    bottom: 100%; /* change here */
    left: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 50%;
    background: url("img/line.svg");
    -moz-background-size:90%;
    background-size:90%;
    background-repeat: no-repeat;
  }