^ 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
Related
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've been trying to get this text underline transition to work: https://codepen.io/shshaw/pen/pdyJBW
a, .strike {
color: #FF5151;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
.strike {
color: #307672;
background-size: 0% 2px;
background-position: 0 0.5em; /*1em;*/
}
.strike:hover,
.strike:focus {
background-size: 100% 2px;
transition-delay: 0s;
}
html {
background: #000249;
color: #FFF;
font-size: 62.5%;
display: flex;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1.4;
max-width: 30em;
width: 90%;
margin: auto;
background: inherit;
-webkit-font-smoothing: antialiased;
font-smoothing: always;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Strike me! Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
And I've got it working in all major browsers except IE11. I've seen this SO question (Background size animation not working in IE11 or Ipad) where the accepted answer says: "Internet Explorer 11's set of animatable CSS properties is the same like they've started in IE 10 with, and background-size is not among those animatable ones."
That answer also links here: https://www.w3schools.com/cssref/css_animatable.asp
Which lists the animatable properties, and lists background-size as one of those animatable properties, but when I try to run their example (https://www.w3schools.com/cssref/tryit.asp?filename=trycss_anim_background-size) in IE11, it doesn't work.
I can't seem to find any documentation that explicitly lists the animatable properties in IE11, so is background-size simply not animatable in IE11, and is there any documentation that says so?
Currently still doing my project and I'm trying to find out how to position headings in certain places. Figure 1 is my final goal for my headings to look like.
[Figure 1][1]
Currently this is what mine looks like (Figure 2), I am struggling to position the heading to a similar spot, every time I do, the paragraphs and the navbar move further down leaving a big white gap between the headings & paragraphs.
Also was wondering how would I level out the image with the text & navbar?
Thanks in advance, much appreciated.
[Figure 2][2]
I believe this is what you wanted:
preview
Basically, you could wrap the header (image + text) into a CSS flexbox, and the rest of the stuff into another flexbox. I edited the CSS file to reflect these changes. Hope this helps! Let me know if you have any other questions.
Here's a link to the jsfillde: https://jsfiddle.net/rzLbkw9m/
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="holiday.css" rel="stylesheet" type="text/CSS">
<title>Task 4</title>
</head>
<body>
<div class="header-container">
<div class="header-image">
<img src="https://st.depositphotos.com/1115174/1875/v/450/depositphotos_18752455-stock-illustration-summer-beach-vacation-background.jpg" alt="Holiday" width="400" height="200" align="left">
</div>
<div class="header-text">
<h1>Holiday Time</h1>
<h3>Get away from it all</h3>
</div>
</div>
<div class="row">
<div class="list-column">
<ul class="list">
<li>Destinations</li>
<li>Deals</li>
<li>Flights</li>
<li>Cruise</li>
<li>Extras</li>
<li>Money</li>
</ul>
</div>
<div class="main-column">
<div class="paragraph">
<p>
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultrices libero eu eros viverra, eget tristique ipsum commodo. Phasellus tempus a erat quis hendrerit. Quisque ipsum felis, vestibulum sed finibus vel, molestie id ante. Morbi metus leo, dictum nec pellentesque nec, condimentum quis magna. Praesent est turpis, pharetra non fermentum sed, elementum ac ante. Integer sodales metus id rutrum hendrerit. Phasellus vel dapibus massa, ut aliquet arcu. Ut consectetur feugiat neque, sed sagittis dui rutrum eget. Maecenas commodo mattis enim quis lacinia. Duis in ipsum vitae mi laoreet dignissim. Nullam consequat velit at magna commodo, in fringilla enim rutrum. Cras at augue sed nisl ultricies lobortis. Praesent rhoncus lectus facilisis, rhoncus purus et, luctus eros. Nunc eros nisi, finibus sit amet urna quis, posuere ultrices mauris.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis lorem vel neque bibendum iaculis vel id tellus. Nulla auctor elit vitae sollicitudin ultrices. Fusce molestie dictum neque, et dictum magna iaculis eget. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed volutpat, augue eget tincidunt feugiat, felis mi vulputate sem, eu mattis nisi quam sit amet est. Cras eu sem nec metus iaculis tempus sit amet non sapien. Aenean id odio semper purus dignissim elementum. Vestibulum faucibus mi ac odio hendrerit venenatis. Cras rhoncus diam magna, at placerat quam rutrum ut.
</p>
</div>
<div class="paragraph">
<p>
<img src="https://i.pinimg.com/474x/c6/60/24/c66024ea79527d9bbafe79ed171558b9--luxury-travel-luxury-hotels.jpg" alt="Holiday" width="220" height="150" align="right" class="intext-img">
Quisque fringilla sodales lorem eget rhoncus. Curabitur pulvinar blandit justo nec volutpat. Mauris bibendum lobortis quam et aliquam. Nulla dictum varius est, sed fringilla ante volutpat ac. Sed tempus dolor diam, ac porta ligula sagittis ac. Morbi vitae nisi porttitor, sollicitudin urna non, tempus justo. Donec vel vulputate est. Donec aliquet vitae velit eu interdum. Quisque et facilisis diam. Duis rutrum faucibus purus at tempus. Mauris auctor tincidunt mauris, quis porttitor magna aliquam molestie. Aliquam efficitur, ex sed finibus porta, tellus diam dictum arcu, ac egestas quam enim tristique velit. Integer volutpat tortor et tortor consequat tincidunt. Donec imperdiet libero vitae sapien commodo, eget pretium libero eleifend. Sed mi felis, porttitor vel blandit laoreet, pretium a felis. Duis in erat interdum, rutrum lectus viverra, pellentesque elit. Sed imperdiet massa ullamcorper mauris tempus, at euismod nibh convallis. In sapien lorem, lacinia eget viverra sit amet, suscipit in diam. Phasellus at sapien eu orci pellentesque eleifend suscipit eu diam. Vivamus quis nibh id sem placerat rutrum. Nunc pellentesque aliquet congue.
Nam at eros elementum, venenatis nibh vel, volutpat mi. Donec varius sapien ipsum, sed sagittis ligula iaculis hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent pharetra ante eget purus rhoncus, ac pharetra eros fermentum. Etiam porta nec leo pretium gravida. Integer a nulla quam. In ullamcorper, nibh id efficitur porttitor, lacus mi semper nisi, id pulvinar ex leo at mi. Vestibulum placerat lacus vitae velit laoreet, in efficitur risus convallis. Nunc at sagittis dolor, eu gravida nunc. In hac habitasse platea dictumst. Mauris vitae lobortis ipsum, quis rhoncus mauris. Ut eget nibh sed dolor sollicitudin dictum efficitur ac ligula. Nullam ut nulla sit amet leo varius tincidunt.
</p>
</div>
</div>
</div>
<div class="footer"> Contact: 0191 227 1111</div>
</body>
</html>
Here's the css file:
/* header */
.header-container {
display: flex;
align-items: center;
border: 1px solid lightblue;
}
.header-text {
margin-left: 25px;
}
.header-text h1 {
color: purple;
font-size: 48px;
}
.header-text h3 {
margin-left: 20px;
}
/* navbar */
.list-column {
flex: 30%;
align-self: flex-start;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:first-of-type {
padding-top: 2px;
}
/* main content */
.row {
margin-top: 10px;
display: flex;
align-items: flex-start;
}
.paragraph {
margin-bottom: 25px;
}
.intext-img {
margin-top: 5px;
margin-left: 10px;
margin-bottom: 10px;
}
p {
font-size: 18px;
margin: 0px;
}
/* footer */
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 0.8rem;
text-align: left;
background-color: #64A3D6;
}
create a div around h1 and h3
.header{
position: relative;
top: 50%;
transform: translateY(-50%);
}
this will put the header in the middle of the area vertically. make sure the padding or margin is minimal
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.
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>