I'm making a website for myself as practice. I'm attempting to have a parallax banner then content below that but for some reason I need to set the minimum height of the inner content to be at least the same size as the banner itself, otherwise you can scroll past the end of the inner content and see the parallax images that are supposed to be hidden. Can anyone tell me why this is happening and how I could fix it? I tried inspecting the page and the space at the bottom seems to just be the background and not any parallax layers. The background is fixed and set to 100% so I'm not sure why that would cause this behavior.
HTML:
<body>
<div id="scrollContainer" class="parallax">
<div class="parallax__group">
<div class="parallax__layer parallax__layer--0">
</div>
<div class="parallax__layer parallax__layer--1">
</div>
<div class="parallax__layer parallax__layer--2">
</div>
<div class="parallax__layer parallax__layer--3">
</div>
<div class="parallax__layer parallax__layer--banner">
</div>
<div class="parallax__layer parallax__layer--4">
</div>
<div class="parallax__layer parallax__layer--5">
</div>
<div class="parallax__layer parallax__layer--6">
</div>
<div id="parBody" class="parallaxBody">
<div id="circleContainer" class="container topSec">
<div id="smallCircle" class="smCircle1"></div>
<div class="smCircle2"></div>
<div class="circle"></div>
</div>
</div>
</div>
</div>
CSS:
html{
height: 100%;
}
body {
font: 50% / 1.5 Arial;
font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: black;
height: 100%;
}
/*parallax styles for 1000px width
Do something different for less than 1000px width*/
.parallax__group {
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.parallaxBody{
position: absolute;
background: rgb(25, 25, 75);
background-size: 1300px auto;
top: 1800px;
width: 100%;
min-height: 1000px;
background-size: 100% 100%;
}
.parallax {
background-image: url("../images/layer1.png");
background-position-x: center;
background-position-y: 0;
background-size: 1300px 1300px;
perspective: 1px;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
font-size: 200%;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
left: -12px;
background-size: 1300px 1300px;
background-repeat: no-repeat;
}
.parallax__layer--6 {
top:-100px;
height: 3200px; /*adjust for screen sizes*/
background-size: 1300px 3200px;
background-image: url("../images/layer7.png");
}
.parallax__layer--5 {
top:-200px;
height: 2000px;
background-size: 1300px 1500px;
transform: translateZ(-0.5px) scale(1.5);
background-image: url("../images/layer6.png");
}
.parallax__layer--4 {
top:-200px;
height: 1200px;
transform: translateZ(-1.5px) scale(2.5);
background-image: url("../images/layer5.png");
background-size: 1300px 1300px;
}
.parallax__layer--3 {
top: -200px;
height: 1200px;
transform: translateZ(-2px) scale(3);
background-size: 1300px 1300px;
background-image: url("../images/layer4.png");
}
.parallax__layer--banner {
height: 300px;
background-size: 50vw 15vw;
left: 32%;
top: 400px;
-webkit-transform: translate(-32%, -70%);
transform: translate(-32%, -70%);
background-repeat: no-repeat;
transform: translateZ(-1px) scale(2);
background-image: url("../images/banner.png");
}
.parallax__layer--2 {
top: -500px;
height: 1200px;
transform: translateZ(-4px) scale(5);
background-size: 1300px 1300px;
background-image: url("../images/layer3.png");
}
.parallax__layer--1 {
top: -400px;
height: 1000px;
transform: translateZ(-5px) scale(6); /*Try moving z-index up and scaling down*/
background-image: url("../images/layer2.png");
background-size: 1300px 1300px;
}
#media screen and (min-width: 1300px){
.parallax__layer--6 {
top:-200px;
height: 3400px;
background-size: 1600px 4200px;
}
.parallax__layer--5 {
top:-500px;
height: 2200px;
background-size: 1600px 2000px;
}
.parallax__layer--4 {
top:-200px;
height: 1500px;
background-size: 1600px 1600px;
}
.parallax__layer--3 {
top: -200px;
height: 1500px;
background-size: 1600px 1600px;
}
.parallax__layer--banner {
height: 300px;
background-size: 50vw 15vw;
top: 0;
}
.parallax__layer--2 {
top: -700px;
background-size: 1600px 1600px;
}
.parallax__layer--1 {
top: -1200px;
height: 1200px;
background-size: 1600px 1600px;
}
}
#media screen and (min-width: 1600px){
.parallax__layer--6 {
top:-200px;
height: 2000px;
background-size: 2000px 5000px;
}
.parallax__layer--5 {
top:-700px;
height: 3000px;
background-size: 2000px 2500px;
}
.parallax__layer--4 {
top:-400px;
height: 1800px;
background-size: 2000px 2000px;
}
.parallax__layer--3 {
top: -700px;
height: 1500px;
background-size: 2000px 2000px;
}
.parallax__layer--banner {
height: 300px;
background-size: 50vw 15vw;
top: 0;
left: 12vw;
}
.parallax__layer--2 {
top: -1000px;
background-size: 2000px 2000px;
height: 1300px;
}
.parallax__layer--1 {
top: -1000px;
height: 1300px;
background-size: 2000px 2000px;
}
}
#media screen and (min-width: 2000px){
.parallax__layer--6 {
top:-800px;
height: 5000px;
background-size: 2600px 6500px;
}
.parallax__layer--5 {
top:-1300px;
height: 4000px;
background-size: 2600px 3250px;
}
.parallax__layer--4 {
top:-1100px;
height: 2200px;
background-size: 2600px 2600px;
}
.parallax__layer--3 {
top: -1100px;
height: 2400px;
background-size: 2600px 2600px;
}
.parallax__layer--banner {
height: 500px;
background-size: 35vw 10vw;
top: 0;
}
.parallax__layer--2 {
top: -2500px;
background-size: 2600px 2600px;
height: 1800px;
}
.parallax__layer--1 {
top: -2000px;
height: 1500px;
background-size: 2600px 2600px;
}
}
* {
margin: 0;
padding: 0;
}
Related
I am trying to make background-image of .panda_section_wrapper responsive. While it finally looks good on smaller devices, it is wrong on bigger ones. It's okey that it is stretched but I would like it to also stretch the height in this case, so Image looks good on small and big screens. How can I do this?
My site:
https://wandawix.github.io/online-zoo/index.html
My code:
https://github.com/WandaWix/online-zoo
<main class="main">
<!-- Panda section ---------------------------------------------------------- -->
<div class="panda_section_wrapper">
<!-- <div class="panda_circle">
</div>
<div class="writting">Watch<br>your<br><span style="color: #FFEE2E">favorite</span><br>animal<br>online</div>
</div>
<div class="btn btn_watch">
<button class="btn">Watch online</button>-->
</div>
.panda_section_wrapper {
/* max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 69vh;
background-size: 93vw; */
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh; /*min(max(16px, 80vw), 60vh);*/
background-size: 93vw;
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
background-size: 93vw;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-size: 100%;
background-size: 100% 100%;
}
.panda_section_container {
max-width: 1160px;
height: 100%;
margin: 0 auto;
}
.panda_circle {
position: relative;
width: 40vw;
height: 50vh;
left: 33%;
top: 0%;
background: linear-gradient(113.96deg, #F9804B 1.49%, #FE9013 101.44%);
border-radius: 50%;
}
Try using this:
.panda_section_wrapper {
max-width: 1600px;
background-color: pink;
background-image: url(img/GiantPanda.png);
height: 25vh;
background-color: pink;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
#media only screen and (min-width: 968px) {
height: 75vh;
}
}
And see if this works
enter image description here
I want to make a similar effect to this one not changing html code , using only CSS , In HTML i have got only one div with class "square" , Thank you for your support in advance .
i think that is what you want
.container {
font-size: 16px;
background: #fff;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 28em;
-moz-perspective: 28em;
perspective: 28em;
position: relative;
top: 100px;
}
.box {
position: absolute;
width: 14em;
height: 14em;
left: 50%;
margin-left: -7em;
backface-visibility: hidden;
}
.anim {
transition: all 0.5s ease-in-out;
}
.b0 {
transform: translateX(-11.7em) rotateY(30deg) ;
}
.box img {
width: 100%;
height: 100%;
border-radius: 5px;
}
#media(max-width: 768px) {
.container {
font-size: 12px;
}
}
#media(max-width: 560px) {
.container {
font-size: 8px;
}
}
<div class="container">
<div class="box anim b0">
<img src="http://www.skitzone.com/wp-content/uploads/2010/06/I_am_nothing__in_the_dark_by_islandtime-630x630-500x500.jpg" alt="" />
</div>
</div>
The requirement is to cut the top in a sloping manner.
This snippet does this by putting the linear-gradient that is required for the border into a before pseudo element, using clip-path to get the required cutting off of the top, and putting the image as background on an after pseudo element.
.square {
width: 20vmin;
height: 20vmin;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
position: relative;
}
.square::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(red, blue);
background-image: linear-gradient(to right, #a2ca3c 0%, #0a7cff 50%, #a2ca3c 100%);
z-index: -1;
}
.square::after {
content: '';
position: absolute;
--borderW: 3%;
top: var(--borderW);
left: var(--borderW);
width: calc(100% - (2 * var(--borderW)));
height: calc(100% - (2 * var(--borderW)));
background-image: url(https://pesi.pl/img/main-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat no-repeat;
clip-path: polygon(var(--borderW) var(--borderW), calc(100% - var(--borderW)) calc(20% + var(--borderW)), calc(100% - var(--borderW)) calc(100% - var(--borderW)), var(--borderW) calc(100% - var(--borderW)));
z-index: -1;
}
<div class="square"></div>
Obviously you will want to decide on exactly what width you want the border to be and whether the border is included in the overall size of the .square element (as here).
How can I add a linear radiant to a background image with a specified height?
Codepen
<div class="bg-img"></div>
<h1>This should not be covered</h1>
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
opacity: .6;
}
}
add position:relative to .bg-img so absolute pseudo refers to it for coordonates and positioning.
.bg-img {
width: 100%;
height: 60%; # works with 100%, but not anything less
background: url('http://unsplash.it/1200x800') center center no-repeat;
background-size: cover;
position:relative;
https://codepen.io/gc-nomade/pen/ZXKdbv
html,
body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background: url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
position: relative;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: linear-gradient(to bottom right, #002f4b, #dc4225);
opacity: .6;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
Other option is to use rgba() colors and set both gradient and image as background images
html, body {
width: 100%;
height: 100%;
}
.bg-img {
width: 100%;
height: 60%;
background:linear-gradient(to bottom right, rgba(0,47,75,0.6), rgba(220,66,37,0.6)), url("http://unsplash.it/1200x800") center center no-repeat;
background-size: cover;
}
<div class="bg-img"></div>
<h1>This should not be covered</h1>
I'm attempting to apply a background image gradient over an image by setting it on its parent div, but it's having no effect, which is strange so I've done this before.
<header id="hero">
<div id="hero-image">
<img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" />
</div>
</header>
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
width: 100%;
max-height: 500px;
object-fit: cover;
}
Demo: http://codepen.io/ourcore/pen/xgqNZJ
I was able to achieve this by applying position: relative and z-index: -1 to #hero-image img:
header#hero {
margin: 0 auto;
width: 100%;
font-size: 1rem;
}
header#hero #hero-image {
background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
display: block;
position: relative;
width: 100%;
max-height: 500px;
object-fit: cover;
z-index: -1;
}
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>