绝对响应图像背景

Question

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

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

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

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

只要您没有 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;
  }

Answer 2

你的一个类似的例子，我觉得对你的目的有用：

  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>

绝对响应图像背景

absolute responsive image background

css

sass

responsive-design

responsive