1

I am trying to create a page using JQuery mobile, I used Themeroller to make it look as I want. The background I used is a gradient, but it doesn't go fullscreen, unless there's enough content on the page to fill the whole screen. See image below:

enter image description here

See how the gradient doesn't go to the bottom of the page? That's what I've been stuck on...

I use the CSS files generated by Themeroller. I tried editing it but it's massive and I have got no clue where and what to change.

Jasper
  • 75,717
  • 14
  • 151
  • 146
Ivan
  • 315
  • 3
  • 7
  • 17

1 Answers1

2

It looks like the background is being applied to the .ui-content element which is not 100% of its container's height. You could either:

  1. make the .ui-content element 100% height or ...
  2. you can set the gradient on the .ui-page element rather than the .ui-content element(s).

I would set the gradient as the .ui-page background like so:

.ui-mobile .ui-page .ui-content {
    background : none;
}
.ui-mobile .ui-page {
    background : /*gradient here*/;
}

Those rules should be specific enough to override the jQuery Mobile stylesheet. Here is a demo: http://jsfiddle.net/YeTdT/

If you need help creating a cross-browser css gradient, see ColorZilla: http://www.colorzilla.com/gradient-editor/

Jasper
  • 75,717
  • 14
  • 151
  • 146