Background image not showing full height-CodePudding

I got this background image to be the right size when the page is normal, but when I add enough text that you have to start scrolling, the image doesn't cover the whole page. The image is taller than it shows, but when I change the height, the image just gets bigger, and I can't figure out how to show the rest of the image. Does any one know how to do this?

.bc-grnd-img {
    background-image: url("https://media.istockphoto.com/photos/little-cute-dumpy-frog-with-green-background-picture-id694848990?k=20&m=694848990&s=612x612&w=0&h=9tBJzT_Efz0GqI30Je72vvkqtSCQ5Deb_RRCdsG-e0c=");
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 500px;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    top: 0px;
    z-index: -1;
}

<div class="bc-grnd-img"></div>

CodePudding user response：

You have wrong in css we don't use link for image, download image

.main{
      width: 100%;
      background: linear-gradient(to top, 
      rgba(0,0,0,0.5)50%,rgba(0,0,0,0.5)50%), url(1.jpg);
      background-position: center;
      background-size: cover;
      height: 109vh;
    }

CodePudding user response：

Your CSS is very heavy and will lead to a slow website in the end, use Photoshop or Photopea to make sure your image is 1920px wide, it can be as tall as you like but remember the larger the image the slower the internet!

This code should then suit.....

background: url("img-name.jpg") 50% 50% no-repeat;
background-size: cover;

50/50 should keep your image centered no matter how tall it is and for a static background we perhaps wouldn't want that repeating.

As a bonus, this also works good for Parallax backgrounds but the image should then definitely be taller than the display area.