Fixed background with scrollable content of the elements in front

Question

I am trying to build a responsive Website. With quite an effort (and help from the community) I managed to mount a fixed background image. But now I am encountering two issues:

With small screens, the content of the elements in front of the image is cut off at the bottom, scrolling is not possible.
The footer is overlapping the other elements.

html/ css:



    
        Title of the Homepage
        
        
        
        

    
    

        
            

                
                    
                        Header of the Page
                    
                

                
                    
                        
                            Alpha
                            
Beta
                            
Gamma
                            
Delta
                            
Epsilon
                        
                    

                    
                        
                            Welcome at our place! 
                        
                            We are opening soon.
                        
                        
                            We are hiring.
                        
                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
                        
                    

                    
                        
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
                    
                
            
        

        
            
                © 2021 Mister Me
                
Contact
                
Alpha
                
Beta

How can I make the content of the elements in the foreground scrollable? How can I move the footer to the bottom without it overlapping the other elements?

user_2339619 · Answer

There were actually quite a few tweaks that I think should be made to get you what you wanted.

Firstly, the background. I would go with position: fixed; rather than position: absolute; to make sure the background is completely independent of the content.

Secondly, the footer does not need the position attribute set, rather you could make it part of the flexbox layout, setting the flex attribute on your #backgroundImage element (and removing the position attribute from backgroundImage).

Lastly, make sure the html and body tags have a full height set in the CSS so everything will scale on larger screens.

You end up with something like:

html {
  box-sizing: border-box;
  font-size: 62.5%;
  height: 100%;
}

body {
  height: 100%;
  font-size: 1.6px; 
  font-size: 1.6rem; 
  line-height: 1.5;
  font-family: "Courier New", Courier, sans-serif;
  color: black;
  display: flex;
  flex-direction: column;
}

#backgroundImage {
  height: auto;
  align-items: center;
  justify-content: center;
  flex: 1 0 auto;
}

#backgroundImage::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/4/4e/Pleiades_large.jpg');
  background-size: cover;
  opacity: 0.1;
}

#Page {
  width: 95%; 
  background-color: rgba(0, 0, 0, 0.2);
  margin: 0.3em auto;
  border: 0.3em solid #00ccff;
  border-radius: 5em;
}

#Logo {
  font-size: 3.5rem;
  font-weight: 650;
  text-transform: uppercase;
  text-align: center;
  margin: 0 auto;
  padding: 0.5em;
  letter-spacing: 0.2em;
}

#Center {
  height: auto;
}

footer {
  flex-shrink: 0;
}

/* -- STYLES FOR NAVIGATION-MENU -- */

ul#navMain {
  list-style-type: none; 
}

li.menu-eintrag a:link,
li.menu-eintrag a:visited,
li.menu-eintrag a:hover,
li.menu-eintrag a:focus,
li.menu-eintrag a:active {
  font-size: 120%;
  color: black;
  text-decoration: none;   
}

li.menu-eintrag a:hover {
  font-weight: bold;
}

.terminvereinbarung a:link,
.terminvereinbarung a:visited,
.terminvereinbarung a:focus,
.terminvereinbarung a:active {
  font-size: 120%;
  color: black;
  text-decoration: none; 
  font-weight: bold;
  padding: 0.5em;
  border: 0.5em solid rgba(0,204,255,0.4);
  border-radius: 5em;
  white-space: nowrap;
}

.terminvereinbarung a:hover {
  border: 0.5em dotted rgba(50,204,255,1);
  border-radius: 5em;
}

.menu-eintrag a:link,
.menu-eintrag a:visited,
.menu-eintrag a:focus,
.menu-eintrag a:active {
  font-size: 120%;
  color: black;
  text-decoration: none; 
  font-weight: bold;
  padding: 0.5em;
  border: 0.5em solid rgba(0,0,0,0);
  border-radius: 5em;
  white-space: nowrap;
}

.menu-eintrag a:hover {
  border: 0.5em solid rgba(255,255,255,0.4);
  border-radius: 5em;
}

@media screen and (min-width: 40em) {
  #nav {
    display: table;
    margin: 0 auto;
  }

  #nav li {
    font-size: 80%;
    width: auto;
    display: inline;
    white-space: nowrap;
  }

  #Center {
    display: inline-block; 
    padding: 0 1em; 
  }

  #begruessung {
    text-align: center;
  }

  #ColumnRight {
    padding: 1em;
  }
}

@media screen and (min-width: 64em){
  header {
    padding-top: 0em;
  }

  #Content {  
    display: flex;
  }

  #nav,
  #ColumnRight {
    width: 20%;
    float: left;
  }

  #nav li {
    display: block;
    font-size: 100%;
    width: 100%;
    float: none;
    padding: 1em;
  }   

  #Center {
    float: left;
    padding: 0em 3em;
    width: 50%;
  }

  #begruessung {
    text-align: left;
  }

  li.menu-eintrag a:link,
  li.menu-eintrag a:visited,
  li.menu-eintrag a:hover,
  li.menu-eintrag a:focus,
  li.menu-eintrag a:active {
  }

  #ColumnRight a:link,
  #ColumnRight a:visited,
  #ColumnRight a:hover,
  #ColumnRight a:focus,
  #ColumnRight a:active {   
  }
}


  

    
      
        Header of the Page
      
    

    
      
        
          Alpha
          
Beta
          
Gamma
          
Delta
          
Epsilon
        
      

      
        
          Welcome at our place! 
        
          We are opening soon.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
        
          We are hiring.
        
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue. Suspendisse dui purus, scelerisque at, vulputate vitae, pretium mattis, nunc. Mauris eget neque at sem venenatis eleifend. Ut nonummy. Fusce aliquet pede non pede. Suspendisse dapibus lorem pellentesque magna. Integer nulla. Donec blandit feugiat ligula. Donec hendrerit, felis et imperdiet euismod, purus ipsum pretium metus, in lacinia nulla nisl eget sapien. Donec ut est in lectus consequat consequat.
        
      

      
        
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis gestas. Proin pharetra nonummy pede. Mauris et orci. Aenean nec lorem. In porttitor. Donec laoreet nonummy augue.
      
    
  



  
    © 2021 Mister Me
    
Contact
    
Alpha
    
Beta

user_17165933 · Answer

to avoid cut off of content at the bottom change #page position fixed to relative.

#page{ position: relative; }

then a scrollbar will appear. 2. to avoid overlapping of footer use:

   footer{
       position:relative;
       bottom:0;
}

and to be honest your styling practice is not good. You should use class to style elements instead of ids.

Fixed background with scrollable content of the elements in front

2 Answers