I would like to create a web page where there the background needs to say the same during the entire scroll. So, the real content of the webpage would feel like floating over the background.
Sorry I don't have any examples, but it would be like what Apple does sometimes when presenting their iPhone chip : for some time the page stays with the same electronic-circuit backgnd but chip specs like its speed keep appearing and scrolling
On
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
width:100%;
height:100%;
margin:0px;
}
#img{
width:100%;
height:300%;
z-index:-1;
position:absolute;
}
#backgroundImage{
width:100%;
height:100%;
}
.ContentWindow{
box-shadow: 5px 10px #888888;
background-color: white;
border-radius:5%;
width:90%;
padding:5%;
margin:0px;
margin-bottom:20%;
}
</style>
</head>
<body>
<div id="backgroundImage">
<img id="img" src="https://homepages.cae.wisc.edu/~ece533/images/frymire.png">
<div class="ContentWindow">
Shrek: "Once upon a time, there was a lovely princess. But she had an enchantment upon her of a fearful sort, which could only be broken by love's first kiss. She was locked away in a castle, guarded by a terrible fire-breathing dragon. Many brave knights had attempted to free her from the dreadful prison, but none prevailed. She waited in the dragon's keep, in the highest room of the tallest tower, for her true love and true love's first kiss." [Laughing] Like that's ever gonna happen.
[Paper Rustling, Toilet Flushes]
Shrek: What a load of--
[Toilet Door slams]
Shrek hops out his outhouse and his routine like taking a mud shower and farting in his pool.
[♪ All-Star By Smash Mouth Playing]
</div>
<div class="ContentWindow">
Steve Harwell: ♪ Somebody once told me the world is gonna roll me, I ain't the sharpest tool in the shed. She was lookin' kind of dumb with her finger and her thumb in the shape of an "L" on her forehead. The years start comin', and they don't stop comin', fed to the rules and I hit the ground runnin', didn't make sense not to live for fun. Your brain gets smart but your head gets dumb. So much to do, so much to see, so what's wrong with takin' the backstreets. You'll never know if you don't go, you'll never shine if you don't glow. Hey, now, you're an all-star. Get your game on, go play. Hey, now, you're a rock star. Get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. It's a cool place, and they say it gets colder, you're bundled up now, but wait till you get older. But the meteor men beg to differ judging by the hole in the satellite picture. The ice we skate is gettin' pretty thin, the water's getting warm so you might as well swim. My world's on fire, how 'bout yours? That's the way I like it and I'll never get bored. Hey, now, you're an all-star. ♪
[Shouting]
Steve Harwell: ♪ Get your game on, go play. Hey, now, you're a rock star. Get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. ♪
</div>
<div class="ContentWindow">
[Belches]
Villagers: Go! Go!
[Record Scrating]
Steve Harwell: ♪ Go. Go. Go. Hey, now, you're an all-star. Get your game on, go play. Hey, now, you're a rock star, get the show on, get paid. And all that glitters is gold, only shootin' stars break the mold. ♪
Villagers: Think it's in there? All right! Let's get it!
Villager 1: Whoa. Hold on. Do you know what that thing could do to you?
Villager 2: Yeah, it'll grind your bones for its bread.
Shrek: [Laughs] Yes, well, actually, that would be a giant. Now, ogres-- they're much worse. They'll make a suit from your freshly peeled skin.
Villager 3: No!
Shrek: They'll shave your liver. Squeeze the jelly from your eyes! Actually, it's quite good on toast.
Villager 3: Back! Back, beast! Back! I warn ya!
[Gasping]
Villager 3: Right.
</div>
</div>
</body>
You can simply use:
However, if the background is very large, it may cause the scrolling effect to be slower.