CODEWITHSUNDEEP
javascripthtmlcss
Skyler Wiernik
Skyler Wiernik

Reputation: 108

Keep background in place while text scrolls

I'm building a web page. I would like the top of my web page to have a full-screen image. When the user scrolls, some lines of text (a couple of headers) should scroll from the bottom to the top, the image staying in place. After scrolling through the headers, the user should be able to scroll past the image to the main content of the page.

Currently, I am able to get the full-screen image and overlay headers on top of it. I am unable to make the image stay in place while the user scrolls.

I am currently only using HTML and CSS, but I plan on using javascript and JQuery later down on the page, so I would be fine with using it here.

Current code:

.fullscreen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("https://moodle.fhgr.ch/pluginfile.php/124614/mod_page/content/4/example.jpg");
    background-size: cover;

}
.fullscreen-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    color: white;
}
.fullscreen-wrapper h1, h2 {
    padding-left: 10%;
}
.fullscreen-wrapper h1 {
    font-size: 128px;
    padding-top: 25%;
}
.fullscreen-wrapper h2 {
    font-size: 256px;
    padding-top: 10%;
}
body {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Webpage</title>
        <link rel="stylesheet" href="/css/home.css">
    </head>
    <body>
        <div class="fullscreen">
            <div class="fullscreen-wrapper">
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
            </div>
        </div>
    </body>
</html>

edit: The page doesn't look good in the small preview. Click "expand snippet"

Upvotes: 0

Views: 561

Answers (3)

Samuel Goldenbaum
Samuel Goldenbaum

Reputation: 18909

Few tweaks:

I think you better off keeping .fullscreen 

position: relative;

Set the height on html, and body tag. 

min-height: 100vh;

Set the background-position: center; to center the image

and

overflow-y: scroll; so you can scroll when you have more content.

See the snippet below:

html,
body {
  min-height: 100vh;
}

.fullscreen {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-image: url("https://moodle.fhgr.ch/pluginfile.php/124614/mod_page/content/4/example.jpg");
    background-size: cover;
    background-position: center;
    overflow-y: scroll;
}
.fullscreen-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    color: white;
}
.fullscreen-wrapper h1, h2 {
    padding-left: 10%;
}
.fullscreen-wrapper h1 {
    font-size: 128px;
    padding-top: 25%;
}
.fullscreen-wrapper h2 {
    font-size: 256px;
    padding-top: 10%;
}
body {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Webpage</title>
        <link rel="stylesheet" href="/css/home.css">
    </head>
    <body>
        <div class="fullscreen">
            <div class="fullscreen-wrapper">
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
                <h1 class="text1">Text 1</h1>
                <h2 class="text2">Text 2.</h2>
               
            </div>
        </div>
    </body>
</html>

Upvotes: 2

Triby
Triby

Reputation: 1757

No need for absolute position, just set background-attachement to fixed and avoid h1/h2 margins to keep wraper background in place.

body {
    min-height:100vh;
    background:#ccc url(https://moodle.fhgr.ch/pluginfile.php/124614/mod_page/content/4/example.jpg) top center no-repeat;
    background-size:cover;
    background-attachment:fixed;
    margin:0;
    padding:0;
}
.fullscreen-wrapper {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.6);
    color: white;
    margin:0;
    padding:0;
}
.fullscreen-wrapper h1, h2 {
    margin:0;
    padding:1em 10%;
}
.fullscreen-wrapper h1 {
    font-size: 128px;
    padding-top: 25%;
}
.fullscreen-wrapper h2 {
    font-size: 256px;
    padding-top: 10%;
}
body {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>Webpage</title>
        <link rel="stylesheet" href="/css/home.css">
    </head>
    <body>
        <div class="fullscreen-wrapper">
            <h1 class="text1">Text 1</h1>
            <h2 class="text2">Text 2.</h2>
        </div>
    </body>
</html>

Upvotes: 0

Alberto
Alberto

Reputation: 12929

add you your .fullscreen this: 

background: fixed; 
background-position: top; /*or wherever you want to be fixed*/

also overflow: auto; will help you with the problem that the .fullscreen will be smaller than .fullscreen-wrapper

Upvotes: 0

Related Questions