Background Scroll using HTML and CSS

In this article, you will learn how to create background image scroll with fixed text on it.When you scroll down or up the background image will slide but the text placed on it will not. This is a responsive page.

Here is the code you just need to copy and paste the code into two separate files, one for HTML and another one is for CSS. You need to focus on the CSS file because this CSS code will style our simple HTML document. Link both files to see the changes.

See also  macOS Mojave Style Checkbox & Radio Button In Pure CSS

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Scroll</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
   <div class="bg-image img1"></div>
   <div class="bg-image img2"></div>
   <div class="bg-image img3"></div>
   <div class="bg-image img4"></div>
   <div class="bg-image img5"></div>
   <div class="bg-image img6"></div>
   <div class="bg-text">SCROLL</div>
</body>
</html>

CSS Code:

body, html {
    height: 100%;
    margin: 0;
  }
  * {
    box-sizing: border-box;
  }
  .bg-image {
    height: 60%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .img1 { background-image: url("bg1.jpg"); }
  .img2 { background-image: url("bg2.jpg"); }
  .img3 { background-image: url("bg3.jpg"); }
  .img4 { background-image: url("bg4.jpg"); }
  .img5 { background-image: url("bg5.jpg"); }
  .img6 { background-image: url("bg6.png"); }
  
  .bg-text {
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.4); 
    color: white;
    font-weight: bold;
    font-size: 60px;
    border: 8px solid #286b92;
    border-radius: 22px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px;
    text-align: center;
  }

OUTPUT:

See also  Pure CSS Image Comparison Slider

More Examples:

Image 3D Sliders using HTML AND CSS

Footer with HTML & CSS Only

5 Reasons Why Python Is Good For Web Development 2021

Leave a Reply

Your email address will not be published. Required fields are marked *