11

Today I though I'd redesign my website and approach it from a different way. Instead of focusing on typography I though I'd just add a big image and little text. I simply done:

html {
    background: url(../img/background.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    filter: blur(10px);
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
}

...however when I see it in the browser (Chrome Version 26.0.1386.0 dev, running on Ubuntu 12.10), the image IS blurred but a faded white frame is also present. Here is a screenshot of how this problem looks like.

Is there any way to get around this? I had a look at this Stack Overflow question but couldn't get it to work (partly because that example uses a <img> tag, not just a <html> one). That white frame just doesn't look good aesthetically. And no, the image doesn't have a white frame (it's simply a screenshot of my desktop, with couple of windows open, so no white frame present). Any ideas why this happens?

Thanks for your help and time.

Community
  • 1
  • 1
  • Try to set a background-color to your html. There may be a problem if you only use an image with a size, which is exactly the size of the viewport. – Christian Kuetbach Jan 27 '13 at 12:13
  • update. if I set you CSS to this page, I get a black border. The Black seems to come from the body-element. Try a transparent background on the body or the color of your image. – Christian Kuetbach Jan 27 '13 at 12:15
  • I don't think I seem to understand. I've set `background-color: #481124;` to the `html` tag but no change. What do you mean by "a transparent background on the body or the color of [my] image"? Also, the text is getting blurred as well (I noticed after I posted this). –  Jan 27 '13 at 14:45
  • Set a background color on the body element. – Patrick James McDougle Dec 17 '13 at 00:09

1 Answers1

18

If it's a possibility for you, a good workaround that I found is to make the image larger than the containing <div>, and also to clip the edges with an overflow: hidden.

In your case, because it's the whole <html> tag, I'd put the image in a <div> with the following CSS:

position: fixed;
top: 0;
left: 0;
transform: scale(1.02); // or whatever scale amount removes the border

This always works for me.

Sheraff
  • 5,730
  • 3
  • 28
  • 53