Pique theme – creating a transparent background

• 

  emiratesti · Member · Feb 17, 2022 at 3:16 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to replicate the background in the page: https://emiratesti.com/mr/ on the home page: https://emiratesti.com/. From what I can tell it is creating a transparent background. How can I replicate that?

  WP.com: Unknown
  Jetpack: Yes
  Correct account: Unknown

  The blog I need help with is: (visible only to logged in users)

• 

  kokkieh · Staff · Feb 18, 2022 at 5:33 am

  • Copy link

  Hi there,

  https://emiratesti.com/mr/ is a regular page, and for regular pages, Pique automatically makes the background of the content area semi-transparent.

  But https://emiratesti.com/ is using the static front page for the theme, which displays page content in panels. You can give each panel its own unique featured image which will appear as a background for that panel, but otherwise panel backgrounds on the front page aren’t transparent.

  To make it transparent, you can use this CSS code:

  .pique-panel, .pique-panel:nth-of-type(2n) {
  	background: rgba(252, 251, 249, 0.5);
  }

• 

  emiratesti · Member · Feb 18, 2022 at 11:12 am

  • Copy link

  it worked! thanks a lot you’re a legend

• 

  kokkieh · Staff · Feb 18, 2022 at 11:53 am

  • Copy link

  Happy to help :)