Menu
I am building a jQuery mobile site, and I am trying to insert a scalable image into the background, which would adjust to screen size of the phone. This is my code:
<!DOCTYPE html>
<html>
<head>
<title>Discover Dubrovnik</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<style type="text/css">
.ui-page {
background: transparent url(image.gif);
}
</style>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header">
<h1>Header tex</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
some text
</div><!-- /content -->
<div data-role="footer">
<h1>Neki izbornik</h1>
</div>
</div><!-- /page -->
When the window is in fullscreen, I get background image, but when I resize it/make it smaller (like the screen in phones), the image isn't resized and it is not centered, so I can only see one part of it...
Connected jQuery and CSS files are downloaded from jquerymobile.com
233
For jquery mobile and phonegap this is the correct code:
<style type="text/css">
body {
background: url(imgage.gif);
background-repeat:repeat-y;
background-position:center center;
background-attachment:scroll;
background-size:100% 100%;
}
.ui-page {
background: transparent;
}
.ui-content{
background: transparent;
}
</style>
None of the above worked for me using JQM 1.2.0
This did work for me:
.ui-page.ui-body-c {
background: url(bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
Here is how I scale <img> tags. If you want to make it a background image you can set it's position to absolute, place the image where you want (using the: top, bottom, left, right declarations), and set it's z-index below the rest of your page.
//simple example
.your_class_name {
width: 100%;
height:auto;
}
//background image example
.your_background_class_name {
width: 100%;
height:auto;
top: 0px;
left: 0px;
z-index: -1;
position: absolute;
}
To implement this you would simply place an image tag inside the data-role="page" element of your page(s) that has the ".your_background_class_name" class and the src attribute set to the image you want to have as your background.
I hope this helps.
43
I think your answer will be background-size:cover.
.ui-page
{
background: #000;
background-image:url(image.gif);
background-size:cover;
}
Try this. This should work:
<div data-role="page" id="page" style="background-image: url('#URL'); background-attachment: fixed; background-repeat: no-repeat; background-size: 100% 100%;"
data-theme="a">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
