1

I am trying to change background color of my html page but its not reflecting. I am using jquerymobile, marionette for my pages. In my css i have written 

body {
background-color:rgb(44,2,4);
}

even i had tried

html, body {
background-color:rgb(44,2,4);
}

What happens is the background color is being set, but i can see on html page just for a flash when the pages loads but after that the default jquerymobile theme gets set. Can anyone please help me with the solution? Thanks in advance.

Shankar Narayana Damodaran
  • 68,075
  • 43
  • 96
  • 126
Rachna
  • 213
  • 4
  • 17

1 Answers1

2

When working with jQuery Mobile you must change class .ui-page if you want to change background color. Even if you change body background with !important it will still stay hidden because class .ui-page acts as an overlay over whole page.

Even more it must be done with overriding, like this:

.ui-page {
    background:rgb(44,2,4) !important;
}

Working example: http://jsfiddle.net/6wD7v/

EDIT :

Found it. You are also using a panel which uses additional overlay div over .ui-page.

This CSS will work now:

.ui-page, .ui-panel-content-wrap {
    background:rgb(44,2,4) !important;
}
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Thanks for the reply, but can you please tell me how can i change the .ui-page to change background, because after just writing the code you specified above its still not working. @Gajotres – Rachna Jul 11 '13 at 07:28
  • Check it now, it should be .ui-page, or copy css from my example. – Gajotres Jul 11 '13 at 07:37
  • Tried with **.ui-page** also, but still not working :( @Gajotres – Rachna Jul 11 '13 at 07:37
  • Where have you put your CSS? Is it in some exterlan CSS file or a part of HTML file? – Gajotres Jul 11 '13 at 07:38
  • Its in an external custom.css file. But i have checked the file get's loaded in the head tag properly. Should i check something else? @Gajotres – Rachna Jul 11 '13 at 07:50
  • This could be it. Read my other answer and check if this could be your problem: http://stackoverflow.com/questions/15800121/why-i-have-to-put-all-the-script-to-index-html-in-jquery-mobile/15806954#15806954 – Gajotres Jul 11 '13 at 07:58
  • If this HTML file is not your first/original HTML file then this will not work. When jQuery Mobile loads other files into a DOM it discards HEAD content and it loads ONLY page div. – Gajotres Jul 11 '13 at 08:01
  • But this is my first html page and still its not working. @Gajotres – Rachna Jul 11 '13 at 08:08
  • Then I don't know what to tell you. You can see from my example that it works. Unfortunately I cant see your project to tell you were your current problem is. If you can, mail me your project, or part of it and I will check it. – Gajotres Jul 11 '13 at 08:16
  • You can check my project over [here](https://github.com/rachnakhokhar/VIBE_JRM_Framework.git) Please advice. @Gajotres – Rachna Jul 11 '13 at 08:18
  • You can find my common.css in assets/www/assets/css/common.css and the class in which i am loading required css is at below path assets / www / scripts / utils / load_css.js @Gajotres – Rachna Jul 11 '13 at 08:22
  • Check it now, I have tested it on your project. – Gajotres Jul 11 '13 at 08:34
  • I didn't commit anything, I have added new content to my answer. Take a look. – Gajotres Jul 11 '13 at 08:41