CODEWITHSUNDEEP
htmlcss
Rmo
Rmo

Reputation: 71

Getting defined edges of filter:blurred image with background cover

So i'm trying to make my background cover my entire screen and remain fixed, but i would like to use background-size: cover to make it fit on different screen ratios. Unfortunately, filter: blur() adds a nasty blurred edge to the picture which i don't want at all, so i'm looking for a way to fix it. On stackoverflow the suggestion is usually to move the picture's edges out of the viewport, but apparently with background-size: cover that simply doesn't work. Is there another way?

CSS snippet: 

#background {
    position: fixed;
    height: 100%;
    width: 100%;    
    filter: blur(5px); //blur
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../Resources/img/background-medium.jpg") no-repeat center 35% fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

(#backgroundis just an empty div)

Upvotes: 0

Views: 49

Answers (1)

user6888351
user6888351

Reputation:

Place the #background in a container and add transform: scale(1.1) to the #background

.container {
   position: fixed;
   height: 100%;
   width: 100%;
   overflow: hidden;}

#background {
   height: 100%;
   width: 100%;    
   filter: blur(5px); //blur
   background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("../Resources/img/background-medium.jpg") no-repeat center 35% fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   transform: scale(1.1);}

Upvotes: 1

Related Questions