CODEWITHSUNDEEP
css
Mark harris
Mark harris

Reputation: 543

blur background image of div?

i have a div which contains my background image and the background image is set to cover 100% width and height of the page. I'm blurring my image slightly.

The problem get is I end up with a white space around the edge of my page?

Andy idea's where I'm going wrong? thanks

css:

#background {
    width: 100%;
    height: 100%;
    background-image: url('../images/drop.png');
    background-size: cover;
    position: fixed;
    -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);

}

body {
    font-size: 15px;
    color: #333331;
    margin: 0;
    font-family: 'Source Sans Pro', sans-serif;
}

html:

<div id="background"></div>

Upvotes: 1

Views: 255

Answers (2)

Jesse
Jesse

Reputation: 439

The white feathering effect occurs because the image needs to be larger than the container. You don't however need to use position fixed with negative margins or even a background div, it's better to use a simple transform: scale(1.1); with a pseudo element.

body {
  position: relative;
  overflow: hidden;
}
body:after {
  position: absolute;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  background-image: url('../images/drop.png');
  background-size: cover;
  filter: blur(2px);
  transform: scale(1.1);
}
body .the-content {
  position: relative;
  z-index: 2;
}

Upvotes: 0

Tomek Sułkowski
Tomek Sułkowski

Reputation: 7201

If you are speaking about a gradient to white on image edges, this is how the blur works.

You can remedy that by spreading the image slightly outside the window, e.g.:

{
    ...
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
}

to hide those white clearings outside the viewport edges.

Upvotes: 3

Related Questions