Background over section

In this example below you will see how to do a Background over section with some HTML / CSS and Javascript

Background only for a section

Thumbnail
This awesome code was written by netmagik, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright netmagik ©
  • HTML
  • CSS
  • JavaScript
    <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Rothorn Partners</h1>
        <h2>Investment Consultants</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <section class="page-bg">
      <h1>This is a section on top of the background
      </h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

      <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>

      <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat</p>
        
      <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>

      <p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>

      <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>

      <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
    </section>
    <footer>
      <h3>Footer does not have a background</h3>
        <a href="disclaimer.html">Disclaimer</a>
        <p>&copy; 2015 D. O'Sullivan for Rothorn Partners.</p>
    </footer>
  </body>
</html>

/*Downloaded from https://www.codeseek.co/netmagik/background-over-section-LVaJZP */
    .page-bg {
  background-image: url(https://unsplash.it/1000/500?image=733);
  position: relative;
  min-height: 100%;
  background-size: cover;
  padding: 1em;
}


/*Downloaded from https://www.codeseek.co/netmagik/background-over-section-LVaJZP */
    

Comments