nettyneets nettyneets - 6 months ago 14
CSS Question

How to make an image bigger than the site, keeping the website at 100vh

I am working on a background animation where 3 images slide to the left, and while they are sliding they fade into each other. link: www.nettyneets.com

The page is a one page website (resize to browser window, 100%width, 100vh).

My problem is that because the image is 100%width, when it slides to the left there's nothing to the right, therefore I need to make the image bigger so that when it slides the background isn't visible but at the same time I need to keep the website 100%width, 100vh.

<div class="intro-body">
<img class="c" src="img/img3.jpeg" />
<img class="b" src="img/img2.jpeg" />
<img class="a" src="img/img1.jpeg" />

</div>


CSS

.intro .intro-body {
width:100%;
height:auto;
position:relative;
}

.intro-body img {
width:100%;
height:100vh;
position:absolute;
z-index:1;
}

img.a {
animation: animatedBg1 12s infinite;
z-index: 3;
opacity:0.5;
}
img.b {
animation-delay: 4s!important;
animation: animatedBg1 12s infinite;
z-index: 2;
}
img.c {
animation-delay: 8s!important;
animation: animatedBg1 12s infinite;
z-index: 1;
}

Answer

I dunno if this is the best solution but you can do this:

.intro-body{ 
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

and then you can set whatever size you want to images it wont go over 100% width and height.

Comments