This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

How to add semi-transparent layer color over background image?

Open 2 replies pluginplugin-siteorigin-csstechnical
karthik marripoodi
9 years ago · Last reply by karthik marripoodi 9 years ago

I am trying to add a semi-transparent layer over the background image. I have been able to change the background color by inserting the following in the custom css code but when I add an icon inside the background, the area around the icon changes back to normal

{
background: url(‘http://www.happho.in/wp-content/uploads/2016/12/Bottle-lamp.jpg’) no-repeat fixed 50% 0px / cover;
opacity: 0.9;
box-shadow: inset 0 0 0 100px rgba(36, 70, 105, 0.74);
position: relative;
text-align: center;
padding: 72px 0px;
width:100%;
}

Please tell me what to do?

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 9 years, 2 months ago

    Hi Karthik,

    Do you have a public URL where I can see your current setup? Ideally, please create a page with it working as desired and then add one with the icon present.

  2. karthik marripoodi 9 years, 2 months ago

    Hi Alex,

    Thanks for your reply. I have created a home page and have been able to successfully added an background image with semi-transparent layer.

    check http://www.happho.in

    I will contact you incase I need anything. Thanks for your support

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread