nettyneets nettyneets - 2 years ago 74
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:

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" />



.intro .intro-body {

.intro-body img {

img.a {
animation: animatedBg1 12s infinite;
z-index: 3;
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 Source

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

    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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download