[VictorParticipant]

Hi support,

Thanks, again, for this great theme!

I’m building a website. http://www.mjohansson.se/wordpress

I want the background image on mjohansson.se/wordpress/om-oss under the headline “Malcolms idé” to blur, but not the content. I’ve read the previous topics in the forums, tried different stackoverflows and pens – and cant get it to work.

I’ve managed to make it blur on an @media value, which is desired.

Thanks.

Victor

[VictorParticipant]

This reply has been marked as private.

[RadModerator]

Hi Victor,

Thanks for writing in.

There is no available css for blurring background images, though it’s possible if we will add additional markup. Like creating image element and make it looks like a background but it’s not.

Or perhaps you’re referring to transparency?

Like this, add this css at your customizer’s custom css.

  .x-content-band.white_transparent { 
  position: relative;
  }
  .x-content-band.white_transparent:before {
  display: block;
  content: "";
  background-color: rgba(255,255,255,0.8);
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  z-index:0;
  }

Then edit your content band the one with background image, and add white_transparent on its class attribute/option.

Hope this helps 🙂

[ThaiModerator]

Hi Victor,
You can try this CSS style:

background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(http://mjohansson.se/wordpress/wp-content/uploads/2014/12/byggnad.jpg) repeat 0 0;
background-size: cover;

Hope this helps

[Author]

Posts