Hi Preety,
when I test this, it works fine in the eclipse build in browser. If I switch to chrome, it depends on the value of the URL parameter "sap-ui-xx-fakeOS". If I set it to "android" it works fine. If I set it to "ios", it does not work. In that case, more specific selectors determine the background color and in addition add a background image to the header bar. In this concrete case it is:
background-color: rgba(0, 0, 0, 0);
.sap-ios .sapMHeader-CTX.sapMBar:not(.sapMBarTranslucent) - #000000
background-image: -webkit-linear-gradient(top, rgb(79, 79, 79) 0px, rgb(23, 23, 23) 50%, rgb(0, 0, 0) 50%);
.sap-ios .sapMHeader-CTX.sapMBar:not(.sapMBarTranslucent) - -webkit-linear-gradient(top, rgb(79, 79, 79) 0px, rgb(23, 23, 23) 50%, rgb(0, 0, 0) 50%)
So for ios if you add a background-color / background-image for the selector:
.sap-ios .myBackgroundStyle .sapMHeader-CTX.sapMBar:not(.sapMBarTranslucent)
you should see a difference.
But overall if you want to change such things like the color of the header bar this all sounds more that you would like to create your own theme. About this topic, you will find more information in this discussion:
http://scn.sap.com/thread/3305457 or in the documentation under https://sapui5.netweaver.ondemand.com/sdk/docs/guide/ThemingFAQ.html.
Regards, Frank