I have set a background image for a mobile page with mobile.jquery. So far so good, but.... I link to the cdn version of jquery css file like:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
Apparently this css file sets a background for my content divs. When I remove this css file, the background image is shown through all my divs which have no background set.
I dislike to not use this default css file from CDN, but how can I overwrite the background in my own .ui-body-c ??
This is the complete css for ui-body-c (build-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;
back开发者_运维技巧ground-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
background-image: #eeeeee;
}
Two things.
First, you could simply add !important
to your own CSS definitions.
Second, background-image: #eeeeee;
is invalid CSS. Valid property values for background-image
are url(path/to/image.png)
, none
, or inherit
.
Create a file on your own server called overrides.css
(or anything-you-want.css), or alternatively you can define it on the page by adding a <style>
element within the <head>
element of you HTML. Inside that file (or <style>
element), add the following:
.ui-body-c {
background-image: url(path/to/image.png) !important;
}
精彩评论