I'm currently using :before pseudo-element on a 100% width div to display a curved top. This all works fine. I have a fixed height on the :before element. Currently, I'm having to use media queries to keep adjusting the height when the browser width is made smaller. Which isn't ideal. Does anyone know of a JS way of doing it? or even better a pure CSS way? I've attached some code so you can see what I'm doing (best viewing full screen and then adjusting the viewport widths).
My desired result would be to remove all the media query breakpoints and have the height & the top values of the :before pseudo-element and the margin-top of .our-team-panel automatically changed based on the viewport width. I understand because it will involve dynamically changing CSS values I will need the code to be inline (rather than in a separate CSS file).
I have to do this across many different divs. So the curves might be slightly different on each and thus have a slightly different starting height.
.our-team-panel{
background-color: #d4f938;
margin-top: 366px;
position: relative;
padding: 100px 0;
}
.our-team-panel:before {
background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat center bottom -1px;
content: '';
position: absolute;
top: -366px;
left: 0;
right: 0;
width: 100%;
height: 366px;
}
#media only screen and (max-width: 2000px) {
.our-team-panel {
margin-top: 287px;
}
.our-team-panel:before{
top: -287px;
height: 287px;
}
}
#media only screen and (max-width: 1500px) {
.our-team-panel {
margin-top: 216px;
}
.our-team-panel:before{
top: -216px;
height: 216px;
}
}
#media only screen and (max-width: 1000px) {
.our-team-panel {
margin-top: 144px;
}
.our-team-panel:before{
top: -144px;
height: 144px;
}
}
#media only screen and (max-width: 768px) {
.our-team-panel {
margin-top: 111px;
}
.our-team-panel:before{
top: -111px;
height: 111px;
}
}
#media only screen and (max-width: 500px) {
.our-team-panel {
margin-top: 73px;
}
.our-team-panel:before{
top: -73px;
height: 73px;
}
}
<section class="our-team-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>
<p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>
:root {
--flexible-height: 15vw;
}
.our-team-panel{
background-color: #d4f938;
margin-top: var(--flexible-height);
position: relative;
padding: 80px 0;
}
.our-team-panel:before {
background: transparent url('https://1bluestring.org.uk/our-team-bg-top.svg') no-repeat left bottom -1px;
content: '';
position: absolute;
top: calc(var(--flexible-height) * -1);
left: 0;
right: 0;
width: 100%;
height: var(--flexible-height);
background-size: auto 100%;
}
<section class="our-team-panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pulvinar magna vitae nulla ultrices, in hendrerit augue rhoncus. Vivamus sodales sapien sit amet ligula malesuada facilisis ac eget metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed at orci orci. Cras interdum, leo sit amet elementum posuere, nunc tortor cursus turpis, vel posuere nisl justo ut elit. Curabitur velit leo, varius varius sollicitudin euismod, tristique nec ex. In et vulputate risus.</p>
<p>Nam mattis, elit at ornare bibendum, leo magna imperdiet velit, sit amet pharetra nunc est a nisl. Donec auctor at libero sit amet feugiat. Integer sed orci at lectus porta porttitor sit amet fringilla nisi. Nullam et auctor elit. In euismod scelerisque nulla, ullamcorper dapibus lectus interdum ac. Etiam at ultricies tortor, nec pretium dolor. Nunc euismod tempus elit. Aliquam placerat mauris in aliquam consequat. Morbi at tempus odio. Vestibulum vestibulum facilisis lorem vel varius. Sed eu consectetur magna, non semper massa. Etiam eget molestie dui. Sed convallis urna at massa aliquet pharetra. Vestibulum dictum neque erat, quis fermentum est consectetur a. Sed auctor tortor ex, sit amet lobortis dolor porta ut. Donec auctor in neque in accumsan.</p>
</section>
Related
I'm using a clip-path to create a div with a rounded bottom, i.e.:
clip-path: ellipse(80% 60% at 50% 40%);
As the viewport width get smaller and smaller, the angle of the curve becomes more and more pronounced. I want the angle to stay the same no matter the width of the viewport. You can see the problem happening in this fiddle if you increase/decrease the viewport width: https://jsfiddle.net/jvorumk2/
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(80% 60% at 50% 40%);
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
If you make the width very narrow, you can see the curve becoming more and more round. If you make the viewport super wide, the curve becomes more flat.
I believe the answer is to change the 80% to a value with a fixed value such as 100rem, but when I do that, the clipping becomes visible at the top of the div on very wide monitors, unless I increase the 100 to a number so great that I flatten the curve at the bottom.
How can I achieve the same effect as seen in the fiddle, but keep the angle of the curve the same no matter how wide the viewport is, including very wide monitors (3840px)? I prefer not to use an SVG clip-path, but if that's the only way, I'm open to it.
You can try like below. A circle with a big radius (as big as you want) and you offset the center to keep the curve at the bottom:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: circle(4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
the same with ellips if you want to control both radius differently:
* {
font-size: 1.125rem;
margin: 0;
padding: 0;
}
#hero {
background: #007DDC;
clip-path: ellipse(4500px 4000px at 50% calc(100% - 4000px));
padding: 3rem 1.25rem 5rem;
}
.wrap {
max-width: 100%;
width: 80rem;
margin:auto;
}
<div id="hero">
<div class="wrap">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse erat nisi, molestie eget pharetra ultricies, posuere ac est. Donec libero nulla, volutpat vitae lectus vel, maximus rhoncus felis. Curabitur sollicitudin urna eu luctus blandit. Ut vel tortor elit. Fusce quis aliquet dui. In auctor lorem non magna luctus dictum. Fusce faucibus, ante eget euismod tristique, arcu est rutrum leo, nec laoreet nunc nibh eu urna. Sed condimentum iaculis lorem, in congue arcu fermentum sit amet. Nullam dui eros, porta sed finibus quis, vestibulum nec ipsum.</p>
</div>
</div>
I want absolute element appear only when page is scrolled down, or at least when page height is higher than window height.
Is this possible with pure CSS? How?
example code:
<body>
content...
<button id="return">return to top</button>
</body>
want to show #return only if 1 page is higher than window OR 2 scrollbar is visible OR 3 even better scrollbar is visible and scrolled down
Here is one idea where the element will appear after a small scroll and will sticky to the bottom:
p {
font-size: 35px;
padding: 10px;
}
body {
margin:0;
position: relative; /* relative to the body */
}
.fixed {
position: absolute;
top: 110vh; /* defined when the element will appear */
bottom: 0;
left: 0;
right: 0;
/* needed to push the sticky element down */
display:flex;
flex-direction:column;
justify-content:flex-end;
/* to hide element if content is short*/
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
}
.fixed>div {
/* stick to the bottom */
position: sticky;
bottom: 0;
background: red;
padding: 15px;
color: #fff;
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
<div class="banner">some content here</div>
</div>
With some fading effect:
p {
font-size: 35px;
padding: 10px;
}
body {
margin:0;
position: relative; /* relative to the body */
}
.fixed {
position: absolute;
top: 110vh; /* defined when the element will appear */
bottom: 0;
left: 0;
right: 0;
/* needed to push the sticky element down */
display:flex;
flex-direction:column;
justify-content:flex-end;
/*fading*/
-webkit-mask:linear-gradient(to bottom,transparent,#fff 200px);
mask:linear-gradient(to bottom,transparent,#fff 200px);
}
.fixed>div {
/* stick to the bottom */
position: sticky;
bottom: 0;
background: red;
padding: 15px;
color: #fff;
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
<div class="banner">some content here</div>
</div>
To avoid the extra scroll when the content is short here is a trick using min() (it won't work on Firefox for now)
p {
font-size: 35px;
padding: 10px;
}
body {
margin:0;
position: relative; /* relative to the body */
}
.fixed {
position: absolute;
top: min(100%,110vh); /* defined when the element will appear */
bottom: 0;
left: 0;
right: 0;
/* needed to push the sticky element down */
display:flex;
flex-direction:column;
justify-content:flex-end;
/*fading*/
-webkit-mask:linear-gradient(to bottom,transparent,#fff 200px);
mask:linear-gradient(to bottom,transparent,#fff 200px);
}
.fixed>div {
/* stick to the bottom */
position: sticky;
bottom: 0;
background: red;
padding: 15px;
color: #fff;
text-align: center;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac risus ac est pulvinar finibus cursus non augue. Proin turpis tortor, dapibus vel metus eget, fermentum aliquam diam. Quisque sodales est sed diam mollis dictum. Aliquam ut volutpat nisi.
Aenean luctus turpis in malesuada malesuada. Praesent non ligula ut ligula feugiat convallis porttitor nec leo. Integer vel risus eget metus viverra ultrices vel vel enim. Sed vitae laoreet ex. Fusce tristique feugiat odio non consequat. Sed bibendum
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
tempor est, sed vestibulum ex aliquet quis. Nam libero quam, laoreet at elementum in, scelerisque vel ex. Vivamus ac purus eget orci vehicula gravida. Aliquam eleifend felis eget porttitor sollicitudin. Donec ut sodales eros. Sed a eros urna.
</p>
<div class="fixed">
<div class="banner">some content here</div>
</div>
I'm trying to make the text of this parallax effect NOT to scroll down at the same as the effect.
I believe it has something to do with the html CSS code(overflow), I've tried putting into different places but it did not work. Is there any way to make my parallax work as it is now and while you scroll down the text will still be fully visible? Cause as soon as you scroll down the parallax AND the text scroll as well but by the time you reach the text, some have already scrolled up.
html {
height: 100%;
overflow: hidden;
}
body {
color: #fff;
margin: 0;
padding: 0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: "Luna"
}
header {
box-sizing: border-box;
min-height: 100vh;
padding: 30vw 0 5vw;
position: relative;
transform-style: inherit;
width: 100vw;
}
header h1 {
margin-top: -100px;
}
header,
header:before {
background: 50% 50% / cover;
}
header:before {
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-image: url('../img/lake.jpg');
background-size: cover;
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-weight: normal;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
p {
color: grey;
}
.container {
max-width: 95%;
margin: 0 auto;
display: block;
}
<header>
<h1>Parallax Effect</h1>
<p>Pure CSS // No JavaScript!</p>
</header>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus dictum interdum lectus vel commodo. Etiam massa augue, fermentum vel elit ut, lobortis pellentesque quam. Nulla pellentesque, velit in accumsan hendrerit, magna mauris congue odio, at
maximus quam est in nisl. Mauris placerat eros dapibus commodo congue. Cras a sollicitudin nulla, at varius lorem. Quisque malesuada rhoncus orci, et convallis metus semper in. Donec vulputate sit amet lectus vitae consequat. Etiam convallis odio
eget diam pretium, et molestie tortor imperdiet. Duis sapien felis, auctor sed mattis a, pretium non nisi. Proin dui metus, tempor ut viverra ac, laoreet ut erat. Sed sollicitudin lorem aliquam, tincidunt mi quis, imperdiet risus.</p>
</div>
Your container class needs to be positioned relative to its parent for it to show up in front of the parallax background.
.container {
max-width: 95%;
margin: 0 auto;
display: block;
position: relative;
}
You'll need to add some background color to separate it visually as well.
Here's a Codepen demo with a similar effect and its accompanying article.
^ Something like that - is it using :after ? (wasnt able to do it for multiple lines)
.home-about h3:after{
margin-top:-15px;
content: " ";
background:#d7edf4;
z-index: 0;
}
Yes you can use a pseudo element. Here's a way absolutely positioned in the h3 with a negative z-index.
h3 {
position: relative;
display: inline-block;
}
h3:after {
content: " ";
background: #d7edf4;
z-index: -1;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: .4em;
}
<h3>text</h3>
give this a try:
::selection {
background: #ffb7b7; /* WebKit/Blink Browsers */
}
::-moz-selection {
background: #ffb7b7; /* Gecko Browsers */
}
Below is the code in action:
.Pink::selection {background: #ffb7b7; /* WebKit/Blink Browsers */}
.Pink::-moz-selection {background: #ffb7b7; /* Gecko Browsers */}
.DarkRed::selection {background: #ff0000; /* WebKit/Blink Browsers */}
.DarkRed::-moz-selection {background: #ff0000; /* Gecko Browsers */}
<p class="Pink">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>
<p class="DarkRed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tristique quam in ex posuere, eu commodo velit sodales. Vestibulum at volutpat lorem, quis interdum diam. Phasellus metus sem, lobortis eu neque eget, tincidunt hendrerit purus. Sed mollis orci dapibus lectus blandit, eget fringilla sapien ullamcorper. Aenean accumsan justo sit amet sapien finibus tincidunt. Nam vitae purus ligula. Nunc quis neque id enim ultricies euismod at id metus. In hac habitasse platea dictumst. Sed suscipit, augue id tempus blandit, orci sem faucibus turpis, ac volutpat sem enim eleifend dui. Maecenas congue augue at lacus viverra rhoncus. </p>
Let me know how you go.
Cheers
I'm trying to get a pure CSS parallax effect working without having a fixed background height. This has been described in a few places, but they have the common constraint that the background layer must have a fixed, known height.
I would like to get the effect working without having a fixed, known height for the background due to some dynamic content.
My minimal example is here: https://jsfiddle.net/yf8oyben/
#container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
perspective: 1px;
overflow-x: hidden;
overflow-y: scroll;
}
.background {
transform: translateZ(-1px) scale(2);
width: 100%;
background: lightgreen;
height: 250px; /* Assumes bg height */
position: absolute; /* Assumes bg height */
top: calc(125px - 50vh); /* Assumes bg height */
}
.foreground {
background: rgba(0, 0, 255, 0.5);
width: 100%;
position: absolute; /* Assumes bg height */
top: 250px; /* Assumes bg height */
}
<body>
<div id='container'>
<div id="group1">
<div class="background">
<div style="height: 10rem"></div>
<center>Banner</center>
<div style="height: 10rem"></div>
</div>
<div class="foreground">
<div style="height: 10rem"></div>
<center>Content</center>
<div style="height: 100rem"></div>
</div>
</div>
</div>
</body>
It works now but assumes that the background is 250px, as annotated in the CSS. Is it possible to remove this and still retain the effect as it currently is?
You can achieve this parallax effect without knowing the height of the banner. you just need to drop the absolute positioning and adapt the perspective-origin and transform-orign properties They need to be positioned one on top of the other.
Here is a demo: CSS only parallax effect
*{margin:0;padding:0;}
#wrap{
position:fixed;
width:100%; height:100%;
overflow-x:hidden;
overflow-y:scroll;
perspective: 1px;
perspective-origin:0 0;
}
.bg{
background:teal;
transform-origin:0 0;
transform: translateZ(-1px) scale(2);
}
.bg img{
display:block;
width:100%; height:auto;
}
.cont{
position:relative;
background:rgba(0,0,0,0.8);
color:#fff;
padding:5%;
}
.cont *{
max-width:900px;
margin:5% auto;
}
<div id="wrap">
<div class="bg">
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</div>
<div class="cont">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et purus porta, porta dolor vel, pulvinar turpis. Suspendisse aliquam placerat turpis, sed ullamcorper nisl vestibulum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod tempor elit a pulvinar. Integer vehicula purus ipsum, id ultricies risus placerat sit amet. Cras vel ante egestas diam egestas sagittis. Mauris facilisis, dolor pulvinar tempus vestibulum, elit lectus gravida sem, sed volutpat dui dolor vel purus. Praesent nec ligula ac mi faucibus hendrerit vitae sed felis. Nullam vehicula magna vitae ultrices dapibus. Pellentesque facilisis dui a diam scelerisque pharetra. Vestibulum dapibus imperdiet molestie. Fusce fringilla facilisis metus, in iaculis lectus fermentum eget. Ut tortor quam, imperdiet sit amet nisi in, fringilla porta sapien. Aenean a enim vestibulum, bibendum dolor sed, consequat mi.</p>
<p>Fusce faucibus nulla id iaculis sagittis. Duis ac arcu a ex elementum feugiat. Proin ut quam quis tortor vulputate semper a id nunc. Morbi rhoncus ultricies ultricies. Praesent semper id massa sed euismod. Fusce sagittis felis nec libero malesuada, in luctus enim aliquam. Aliquam sagittis, orci eget blandit vestibulum, mi dui blandit mauris, et tincidunt tellus nisi sagittis lacus. Sed dignissim, sapien vitae cursus imperdiet, augue massa tempor ex, non finibus risus metus ac enim. Mauris blandit eros nisi.</p>
<p>Sed bibendum ante ac metus hendrerit, nec commodo tortor venenatis. Pellentesque porta eros non eros cursus, vitae commodo sapien facilisis. Praesent sit amet volutpat lacus. Nullam sed quam ac dolor blandit lacinia. Ut euismod turpis sit amet libero pulvinar, non aliquet lacus bibendum. Nullam libero massa, facilisis sed neque id, porta fringilla eros. Curabitur vestibulum nisi nec tempor tempor. Sed fermentum mauris diam, eu volutpat magna tempus et. Ut semper dapibus purus eget ullamcorper. Aenean varius rutrum purus id congue. Mauris sit amet turpis ornare, pharetra ex et, porta lorem. In hac habitasse platea dictumst.</p>
<p>Nulla sed pellentesque nibh, eu consectetur neque. Curabitur eu risus at felis sagittis blandit. Nunc non massa non massa mattis semper. Curabitur dapibus tortor velit, id tincidunt ligula rutrum sed. Quisque feugiat consequat molestie. Curabitur lobortis neque ac porta imperdiet. Sed malesuada nibh sit amet magna commodo, sed bibendum turpis vestibulum. Suspendisse vel rutrum dolor, sed bibendum turpis. Morbi condimentum fermentum urna id venenatis.</p>
</div>
</div>