Blurring a background image?

Question

found out how to apply a background image and blur stuff, but when I apply the filter(s) it blurs everything but the image. i'm using shugercube2 and here's the code:

body {
  background-image: url(https://media.licdn.com/dms/image/C4E1BAQFHXgKjNYnJ7w/company-background_10000/0?e=2159024400&v=beta&t=NRipT6TXiw3jcpKxXf02_snAFqazYVLgTMDwkOfzSJg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  overflow-y: scroll;
  overflow-x: hidden;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

 

Answer 1

There are a couple of issues with what you are trying to do, the main one being that the CSS filter property applies it's effect to all of the content of the target element, this includes the content of any descendent elements that target may have. As the body element is the parent of all the different parts that make up the default SugarCube User Interface (eg. the main Passage Area, the Left Side-bar, the Dialogs, etc..) any effect applied to it effects the whole of the UI.

You can get around this issue by applying both the background image and the filter effect to one of the body's pseudo elements (like before) instead.

Place the following CSS within your project's Story Stylesheet area, it includes comments which you can delete if you like.

body:before {
	/* For the pseudo element's background to become visible
	   the element needs some content. */
	content: '';

	/* Force it to appear behind the content of the body element. */
	z-index: -1;

	/* Position and resize it so it covers the whole of the web-browser view-port. */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	/* Setup the background. */
	background-image: url("https://media.licdn.com/dms/image/C4E1BAQFHXgKjNYnJ7w/company-background_10000/0?e=2159024400&v=beta&t=NRipT6TXiw3jcpKxXf02_snAFqazYVLgTMDwkOfzSJg");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	background-size: cover;

	/* Apply the effect to the element. */
	-webkit-filter: blur(8px);
	filter: blur(8px);
}

 

Comments

thank you so much, it worked like a dream.