Docs

[Benjamin H]

Hello,

I am looking to have a background image of the image that is displayed in front, with about 50% opacity and a white shadow over it, as seen on this page: http://www.lvbaptist.org/jenn/

I manually set this picture in photoshop to look like this; however, I am wondering if there is css that I could use, rather than manually editing the picture for every post?

Thanks!

[Rahul]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[Benjamin H]

This reply has been marked as private.

[Friech]

Hi There,

You mean this blurry effect?

Actually there is blur filter in CSS, but this will blur the whole section including the content. So we need to have the background on different container (<div>), but the problem on this is you need to declare the background manually with CSS (not on the Cornerstone section’s option).

.single-post #x-section-1::before {
	content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('IMAGE URL HERE');
  background-size:cover;
  width: 100%;
  height: 100%;

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

Cheers!

[Benjamin H]

Ok, would that also be true to get the colored effect (giving it a white or black tone to the picture)? In this example that I’ve shown, the picture is set at about 50% opacity with a white colored effect, in addition to the blur effect.

Thanks!

[Benjamin H]

One other question…I would like to have this effect on about 60 posts (all different pictures)… This would obviously be an excessive amount of CSS to add. What would you recommend is the best process to add both the colored and blur effect to the background image we’ve been working on. Thank you!

[Joao]

Hi Benjamin,

By doing this effect on Photoshop you avoid unecessary CSS on your website, I believe it is better.

I am not sure if you still need help based on your last comment, let us know if you do.

Thanks

Joao

[Author]

Posts