admin管理员组文章数量:1313249
I am trying to override the typical jQuery Mobile background with a .jpg
. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src=".9.1.min.js"></script>
<script src=".3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html
loads as a picture fades in. (This CSS override works perfect)- After the image has faded in, I do a
$.mobile.changePage()
to another page, not a multipage format - This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
I am trying to override the typical jQuery Mobile background with a .jpg
. I cannot, for the life of me, figure this out. It is driving me nuts! I have been all over SO and Google to no avail with anyone's answers.
My current header information
<head>
<title>Veolia Water Splash Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery./mobile/1.3.2/jquery.mobile-1.3.2.min.css"/>
<link rel="stylesheet" href="./css/stylo.css"/>
<script src="http://code.jquery./jquery-1.9.1.min.js"></script>
<script src="http://code.jquery./mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="./js/main.js"></script>
</head>
The process my application is following:
index.html
loads as a picture fades in. (This CSS override works perfect)- After the image has faded in, I do a
$.mobile.changePage()
to another page, not a multipage format - This is where it fails, the background loads up, but then gets overridden by something. I just cannot seem to figure out what is overriding it.
This is my CSS
#logo
{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 80%;
}
body
{
background: url('../img/background.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
.ui-page .ui-body-c .ui-page-active .ui-overlay-c .ui-mobile-viewport
{
background: transparent !important;
}
Anyone have some pointers or know what I am doing wrong? The background flashes for a split second, but then gets tossed out...
Thanks in advance for any help!
Share Improve this question edited Oct 14, 2013 at 0:48 nathansizemore asked Oct 13, 2013 at 23:51 nathansizemorenathansizemore 3,2068 gold badges41 silver badges67 bronze badges1 Answer
Reset to default 8First, you need mas between the CSS classes you are setting to transparent. Next, as ui-overlay-c is also applied to the body, you can set its background image along with the body's.
So together, set the transparency first, then the body background:
.ui-page, .ui-body-c, .ui-page-active, .ui-overlay-c, .ui-mobile-viewport
{
background: transparent !important;
}
body, .ui-overlay-c
{
background: url('http://www.hdwallpapers.in/wallpapers/digital_layers-1440x900.jpg') !important;
background-repeat:repeat-y !important;
background-position:center center !important;
background-attachment:scroll !important;
background-size:100% 100% !important;
}
Here is a working fiddle of the above: http://jsfiddle/ezanker/5GgR9/
本文标签: javascriptOverride jQuery Mobile Background CSSStack Overflow
版权声明:本文标题:javascript - Override jQuery Mobile Background CSS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1741950095a2406659.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论