I am working on Sp2013 site and want to change the opacity of the overlay. This is the CSS that needs to be used:-

.ms-core-overlay {
    background-color: rgba(255, 255, 255, 0.5);

I am setting the opacity from 0.85 to 0.5. I donot want to create a new css file and link it to the masterpage so I was trying to chagne the CSS via javascript on masterpage. Foll. is my code which is pasted right above the </head> tag:-

<script language="javascript">
    function HideBrandingsuite()
     var elem = document.getElementById("ms-core-overlay");
elem.style.background-color = "rgba(255, 255, 255, 0.5)";

I can see the alert box, but the the overlay isnt getting updated with new opacity. Pls guide.

Is it possible to use <style> tag on the masterpage before the </head> tag to achieve the purpose? Example:- This doesnot work for me...

 .ms-core-overlay {
        background-color: rgba(255, 255, 255, 0.5);

2 Answers 2


If your style is static try these steps:

  1. Check core styles for an important declaration
  2. Add style element to the page (content editor web part or directly in the master page)
  3. Сlarify selector expression .someclass .ms-core-overlay
  • Should I use the foll. code before the /head tag? <style> .ms-core-overlay{ background-color:'rgba(255, 255, 255, 0.5)' !important; } </style> This doesnt work for me.....
    – variable
    Mar 11, 2014 at 7:42
  • I cannot check it now, but I think, you can. If it does not work use step #3. It should resolve issue. Also you can skip important if the core style does not contain it.
    – Alexander
    Mar 11, 2014 at 7:48
  • what is .someclass?
    – variable
    Mar 11, 2014 at 7:49
  • someclass - it is a class of a parent element. Or parent element of parent. Or parent element of parent of parent... etc.
    – Alexander
    Mar 11, 2014 at 7:51

You need to use jquery $document.ready so that code will be executed only when the entire html and css has been loaded, the way you did it, it will be executed at the beginning when there is no guarante the page has finished rendering

also you should jquery selectors.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.