Databases
StackOverflow2013
Postsdbo
POWhite blur around image when using CSS3 blur filter?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhite blur around image when using CSS3 blur filter?
    primarykey
    data
    text
    <p>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:</p> <pre><code>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); } </code></pre> <p>...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. <a href="https://i.stack.imgur.com/ygvhr.png" rel="nofollow noreferrer">Here is a screenshot of how this problem looks like</a>.</p> <p>Is there any way to get around this? I had a look at <a href="https://stackoverflow.com/questions/12224320/defined-edges-with-css3-filter-blur">this Stack Overflow question</a> but couldn't get it to work (partly because that example uses a <code>&lt;img&gt;</code> tag, not just a <code>&lt;html&gt;</code> 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?</p> <p>Thanks for your help and time.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USraf
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. USAnkush Dharkar
      1. VTFavorite
    1. COTry 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.
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. USChristian Kuetbach
    2. COupdate. 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.
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. USChristian Kuetbach
    3. COI 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).
      singulars
      1. POWhite blur around image when using CSS3 blur filter?
      1. USraf
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload