Абсолютный отзывчивый фон изображения

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> 

Я знаю, что это неправильно помещен из-за топ: 0, однако я не знаю, как чтобы он оставался на верхней границе нижнего колонтитула.

Я был бы признателен за любую помощь.

Answer 1

Аналогичным примером ваших, я думаю, что его полезное для вашего 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

До тех пор, пока вы не имеете 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; 
    }