Reputation: 557

Fixed background with scrollable content of the elements in front

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the Homepage</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style type="text/css">
            html {
                box-sizing: border-box;
                font-size: 62.5%;
            }

            Body {
                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;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            #backgroundImage::before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background-image: url('ImageLake.bmp');
                background-size: cover;
                opacity: 0.1;
            }

            #Page {
                position: fixed;
                top: 0;
                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 {
                position: absolute;
                bottom: 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 {   
                }
            }
        </style>

    </head>
    <body>

        <div id="backgroundImage">
            <div id="Page">

                <header>
                    <div id="Logo">
                        Header of the Page
                    </div>
                </header>

                <div id ="Content">
                    <nav id="nav">
                        <ul id="navMain">
                            <li class="terminvereinbarung"><a href="#DUMMY_LINK">Alpha</a>
                            <li class="menu-eintrag"><a href="index.html" class="active">Beta</a>
                            <li class="menu-eintrag"><a href="#DUMMY_LINK">Gamma</a>
                            <li class="menu-eintrag"><a href="#DUMMY_LINK">Delta</a>
                            <li class="menu-eintrag"><a href="#DUMMY_LINK">Epsilon</a>
                        </ul>
                    </nav>

                    <div id="Center">
                        <h1 id="begruessung">
                            Welcome at our place! </h1>
                        <h2>
                            We are opening soon.
                        </h2>
                        <h3>
                            We are hiring.
                        </h3>
                        <p>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.
                        </p>
                    </div>

                    <aside id="ColumnRight">
                        <p>
                            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.
                    </aside>
                </div>
            </div>
        </div>

        <footer>
            <ul id="footerList" >
                <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">&copy; 2021 Mister Me</a>
                <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Contact</a>
                <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Alpha</a>
                <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Beta</a>
            </ul>
        </footer>

    </body>
</html>

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?

Upvotes: 2

Answers (2)

EssXTee

Reputation: 1798

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

<div id="backgroundImage">
  <div id="Page">

    <header>
      <div id="Logo">
        Header of the Page
      </div>
    </header>

    <div id ="Content">
      <nav id="nav">
        <ul id="navMain">
          <li class="terminvereinbarung"><a href="#DUMMY_LINK">Alpha</a>
          <li class="menu-eintrag"><a href="index.html" class="active">Beta</a>
          <li class="menu-eintrag"><a href="#DUMMY_LINK">Gamma</a>
          <li class="menu-eintrag"><a href="#DUMMY_LINK">Delta</a>
          <li class="menu-eintrag"><a href="#DUMMY_LINK">Epsilon</a>
        </ul>
      </nav>

      <div id="Center">
        <h1 id="begruessung">
          Welcome at our place! </h1>
        <h2>
          We are opening soon.
        </h2>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
        <h3>
          We are hiring.
        </h3>
        <p>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.
        </p>
      </div>

      <aside id="ColumnRight">
        <p>
          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.
      </aside>
    </div>
  </div>
</div>

<footer>
  <ul id="footerList" >
    <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">&copy; 2021 Mister Me</a>
    <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Contact</a>
    <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Alpha</a>
    <li class="footer-menu-eintrag"><a href="#DUMMY_LINK">Beta</a>
  </ul>
</footer>

Upvotes: 1

Tech Sink

Reputation: 52

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.

Upvotes: 1

Fixed background with scrollable content of the elements in front

Answers (2)

Related Questions