0

I have an html that looks like this:

<body>
stuff here that scrolls past the viewport
</body>

<div class="bgimg"> repeated image made with blurred css filter here </div>

and css that looks like this:

.bgimg {
    
        background: url(urlhere.gif);
        
        filter: blur(15px);
    
        -webkit-filter: blur(15px);
    
        background-size: 100% 100%;
    
        background-repeat: repeat;
    
        position: absolute;
    
        top: 0;  
        
        bottom: 0;
        
        width: 100%;
    
        height: 100%;
    
        z-index: -1;
    
}

I made a separate background image so i can blur it using css and not have my body blurred out as well.

My problem is when I set the size of the div in my CSS with a repeat function, it only goes as far as the viewport window and does not repeat all the way down to the bottom of my html. Is there a way to make this div as big as the html so when I scroll down I still see my background repeat?

Husky
  • 1
  • 1
  • Any other stuff in your HTML? As a test in fiddle don't show anything wrong. Although I did use a different image from the code. If you could provide a fiddle that would help alot. – Ugene Aug 10 '21 at 08:26

2 Answers2

0

Firsly, put your div inside of your body, then make the position of the body relative. This answer has a good explanation why this works.

body {
    position: relative;
    height: 3000px; <!-- Added for testing purposes -->
    width: 100%;
}

Then, change your background-size: 100% 100%; to background-size: 100% as setting the y axis to 100% cause the image to stretch instead of actually repeating.

Also, altough it might not be necessary, you could set the background to only repeat vertically background-repeat: repeat-y; if you don't want it to horizontally repeat.

TheWilley
  • 29
  • 1
  • 5
0

you can use this to use view width and view height or screen:

{   
    background-size:100vw;
    overflow:hidden;
}
CTQH
  • 1
  • 2