absolute responsive image background

Question

I have a little question due to position of background image in my footer.

As You can see on the picture, my current background image (green dotted line with ball - it is svg image) is placed in the middle if the footer.

I would like to place it in the position of the red line, staying there while resizing window. Code of it is:

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;
    }
  }
}

And html is:

<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>

I know it is wrong placed due to top:0 however I dont know how to make it stay right on the top border of footer.

I would be grateful for any help.

Answer 1

A similar example of yours, I think its usefull for your purpouse:

  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

As long as you don't have overflow issues, all you should need to do is replace top:0 with 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;
  }