jquery mobile background image

Question

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    lt  DOCTYPE html gt    lt html gt    lt head gt    lt title gt Discover Dubrovnik lt  title gt    lt link rel  stylesheet  href  jquery mobile-1 0a4 1 min css    gt   lt script type  text javascript  src  jquery-1 5 2 min js  gt  lt  script gt   lt script type  text javascript  src  jquery mobile-1 0a4 1 min js  gt  lt  script gt   lt style type  text css  gt   ui-page       background  transparent url image gif      lt  style gt    lt  head gt    lt body gt     lt div data-role  page  data-theme  b  gt    lt div data-role  header  gt       lt h1 gt Header tex lt  h1 gt   lt  div gt  lt  --  header -- gt    lt div data-role  content  data-theme  d  gt      some text      lt  div gt  lt  --  content -- gt    lt div data-role  footer  gt   lt h1 gt Neki izbornik lt  h1 gt   lt  div gt   lt  div gt  lt  --  page -- gt       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

User · Answer

Just add  important tag to all css elements in Paolo s answer  Works fine for me JQM phonegap  EXAMPLE   body       background  url    images background jpg   important

User · Answer

Override ui-page class in your css    ui-page       background  url  image gif        background-repeat  repeat

User · Answer

Here is how I scale  lt 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

User · Answer

Try this  This should work    lt 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  gt

User · Answer

With JQM 1 4 2 this one works for me  Change theme to the used one     ui-page-theme-b   ui-page-theme-b  ui-panel-wrapper       background  transparent url    img xxx   important      background-repeat repeat  important

User · Answer

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

User · Answer

my experience   in some situations the background image url have to be put separately for all page parts - I use   var bgImageUrl    url    thirdparty icons android-circuit jpg              indexa   live  pageinit   function             indexa   css  background-image  bgImageUrl          contenta   css  background-image  bgImageUrl          footera   css  background-image  bgImageUrl              where  indexa  is the id of the whole page  and the  contenta  and  footera  are id-s of the  content and footer respectively   This works for sure in PhoneGap   jQuery Mobile

User · Answer

I found this answer works for me   lt style type  text css  gt   background   position  fixed   top  0   left  0   width  100   important   height  100   important   background  url mobile-images limo-service jpg  no-repeat center center fixed  important   -webkit-background-size  cover   -moz-background-size  cover   -o-background-size  cover   background-size  cover   z-index  -1       ui-page   background none      lt  style gt        also add id  background  to the div for your content section   lt div data-role  page  data-theme  a  gt     lt div data-role  main  class  ui-content  id  background  gt     lt  div gt   lt  div gt

User · Answer

just simple replace your class with this    ui-page      background  transparent url images EarthIcon jpg  no-repeat center center      I have same issue and i solved it

User · Answer

I think your answer will be background-size cover    ui-page   background   000  background-image url image gif   background-size cover

User · Answer

For jquery mobile and phonegap this is the correct code    lt style type  text css  gt  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     lt  style gt

[jquery] jquery mobile background image

Examples related to jquery

Examples related to css

Examples related to jquery-mobile