After setting a background image for a mobile page using mobile.jquery, I encountered an issue. When linking to the cdn version of the jquery css file:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
The default css from this file overrides my background settings for content divs. However, removing the css file displays the background image properly on divs without any background set.
I prefer to use the default css file from CDN, but how can I customize the background in my own .ui-body-c class?
The provided css for ui-body-c (built-in from mobile.jquery http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css):
.ui-body-c
{
border-top-width: 1px;
border-right-width-value: 1px;
border-right-width-ltr-source: physical;
border-right-width-rtl-source: physical;
border-bottom-width: 1px;
border-left-width-value: 1px;
border-left-width-ltr-source: physical;
border-left-width-rtl-source: physical;
border-top-style: solid;
border-right-style-value: solid;
border-right-style-ltr-source: physical;
border-right-style-rtl-source: physical;
border-bottom-style: solid;
border-left-style-value: solid;
border-left-style-ltr-source: physical;
border-left-style-rtl-source: physical;
border-top-color: #b3b3b3;
border-right-color-value: #b3b3b3;
border-right-color-ltr-source: physical;
border-right-color-rtl-source: physical;
border-bottom-color: #b3b3b3;
border-left-color-value: #b3b3b3;
border-left-color-ltr-source: physical;
border-left-color-rtl-source: physical;
color: #333333;
text-shadow: #ffffff;
background-color: #f0f0f0;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
background-image: #eeeeee;
}