Hintergrund-Bild funktioniert nicht gut mit sticky footer

Question

Also, mit meinem aktuellen HTML-und CSS-Setup, bricht das Hintergrundbild für meine Inhalte für meine Fußzeile, die nicht genau das ist, was ich will. Fall und Punkt: http://droppinghike.nl/gallerij.html

Mein HTML:

<div class="container"> 
    <header> 
     <h1 id="title">Dropping Hike</h1> 
     <ul id="nav"> 
      <li><a class="nav-link" id="active" href="#">Home<div class="nav-underline"></div></a></li> 
      <li><a class="nav-link" href="aanmelden.html">Aanmelden<div class="nav-underline"></div></a></li> 
      <li><a class="nav-link" href="deelnemers.html">Deelnemers<div class="nav-underline"></div></a></li> 
      <li><a class="nav-link" href="gallerij.html">Gallerij<div class="nav-underline"></div></a></li> 
      <li><a class="nav-link" href="contact.html">Contact<div class="nav-underline"></div></a></li> 
      <li><a class="nav-link" href="faq.html">FAQ<div class="nav-underline"></div></a></li> 
     </ul> 
    </header> 

    <div class="row"> 
     <h3 class="section">Welkom</h3> 
     <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono. Negat esse eam, inquit, propter se expetendam. Post enim Chrysippum eum non sane est disputatum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Duo Reges: constructio interrete. Nam quid possumus facere melius? Hoc non est positum in nostra actione. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Duarum enim vitarum nobis erunt instituta capienda. An hoc usque quaque, aliter in vita? Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Hoc loco tenere se Triarius non potuit. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Ita graviter et severe voluptatem secrevit a bono. Eademne, quae restincta siti? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Equidem e Cn.</p> 
    </div> 

    <div class="row"> 
     <h3 class="section">Thema</h3> 
     <p style="text-align: justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono. Negat esse eam, inquit, propter se expetendam. Post enim Chrysippum eum non sane est disputatum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Duo Reges: constructio interrete. Nam quid possumus facere melius? Hoc non est positum in nostra actione. An ea, quae per vinitorem antea consequebatur, per se ipsa curabit? Duarum enim vitarum nobis erunt instituta capienda. An hoc usque quaque, aliter in vita? Callipho ad virtutem nihil adiunxit nisi voluptatem, Diodorus vacuitatem doloris. Est autem etiam actio quaedam corporis, quae motus et status naturae congruentis tenet; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros. Hoc loco tenere se Triarius non potuit. Immo vero, inquit, ad beatissime vivendum parum est, ad beate vero satis. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Ita graviter et severe voluptatem secrevit a bono. Eademne, quae restincta siti? Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Ego quoque, inquit, didicerim libentius si quid attuleris, quam te reprehenderim. Equidem e Cn.</p> 
    </div> 

    <div class="row"> 
     <div class="one-third column"> 
      <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-bullseye fa-stack-1x fa-inverse"></i></span> Uitdagend</h5> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p> 
     </div> 
     <div class="one-third column"> 
      <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-beer fa-stack-1x fa-inverse"></i></span> Gezellig</h5> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p> 
     </div> 
     <div class="one-third column"> 
      <h5 class="section"><span class="fa-stack"><i style="color:#1e824c" class="fa fa-circle fa-stack-2x"></i><i class="fa fa-flag-checkered fa-stack-1x fa-inverse"></i></span> Competitief</h5> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Ita graviter et severe voluptatem secrevit a bono.</p> 
     </div> 
    </div> 
</div> 

<footer class="u-full-width"> <!-- Footer --> 
    <div class="container"> 
     <hr> 
     <p style="text-align: center">© 2016 Dropping Hike. Alle rechten voorbehouden.</p> 
    </div> 
</footer> 

Meine CSS:

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    background-image: url(../images/boom-schors-texture.jpg); 
    background-attachment: fixed; 
    font-family: 'Roboto Slab', serif; 
    margin-bottom: 100px; 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 100px; 
} 
.container { 
    padding-left: 35px; 
    padding-right: 35px; 
    background: url(../images/white_wall_hash.png); 
    min-height: 100%; 
} 
a { 
    color: #1e824c; } 
a:hover { 
    color: #a3c338; } 
p { 
    text-align: justify; } 
.section { 
    text-transform: uppercase; 
    font-weight: 700; 
    font-family: 'Montserrat', sans-serif; 
    color: #1e824c;} 
.underline { 
    border-width: 0; 
    width: 64px; 
    border-bottom: 2px solid #1e824c; } 
.nav-underline { 
    width:0; 
    height:2px; 
    background:#1e824c; 
    transition:width 0.5s; 
    -webkit-transition:width 0.5s; } 
a.nav-link:hover > .nav-underline { 
    width:100%; } 
a.nav-link#active > .nav-underline { 
    width:100%; } 
a.nav-link:hover { 
    color: #000; } 
a.nav-link { 
    color: #222; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-weight: 400; 
    margin-top: 0; 
    font-size: 1.8rem; 
    line-height: 1.5; 
    letter-spacing: -.05rem; } 
.button.button-primary:hover, 
button.button-primary:hover, 
input[type="submit"].button-primary:hover, 
input[type="reset"].button-primary:hover, 
input[type="button"].button-primary:hover, 
.button.button-primary:focus, 
button.button-primary:focus, 
input[type="submit"].button-primary:focus, 
input[type="reset"].button-primary:focus, 
input[type="button"].button-primary:focus { 
    background-color: #fff; 
    border-color: #1e824c; 
    color: #000; } 
.button.button-primary, 
button.button-primary, 
input[type="submit"].button-primary, 
input[type="reset"].button-primary, 
input[type="button"].button-primary { 
    color: #fff; 
    border-color: #1e824c; 
    background-color: #1e824c; } 
input[type="email"]:focus, 
input[type="search"]:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus, 
select:focus { 
    border: 1px solid #1e824c; 
    outline: 0; } 
#nav { 
    font-family: 'Montserrat', sans-serif; 
    text-align: justify; 
    margin-top: 3rem; } 
#nav:after { 
    content: ''; 
    display: inline-block; 
    width: 100%; } 
#nav li { 
    display: inline-block; 
} 
#title { 
    text-transform: uppercase; 
    color: #1e824c; 
    font-weight: 700; 
    font-family: 'Montserrat', sans-serif;} 
header { 
    padding-top: 25px; 
} 
hr { 
    border-width: 0; 
    width: 90%; 
    border-bottom: 4px solid #1e824c; } 

Irgendwelche Ideen oder Anregungen wäre sehr dankbar! :)

Answer 1

Sie können die Standard oberen Rand von der hr Fußzeile entfernen:

hr { 
    margin-top: 0; 
} 

Derzeit ist die Standard-hr schiebt die ganze Fußzeile unten, wo es sein sollte.

Wenn Sie den Raum zwischen dem Inhalt und der Fußzeile auf längeren Seiten behalten möchten, können Sie einen <br /> zwischen dem Hauptbehälter und der Fußzeile hier hinzufügen:

Edit: Um Stellen Sie den Hauptinhalt auf volle Höhe, anstatt die Fußzeile nach unten zu schieben:

html { 
    height: 100%; 
} 
body { 
    min-height: 100%; 
    margin-bottom: 0; 
} 
.container { 
    min-height: 100%; 
}