0

I've got a jQuery Mobile project that requires having a gradient background color behind a background image (and then other stuff in the foreground, like buttons, text, etc).

It's easy to put a solid background color behind a background image, like so...

.ui-page {
    background: red url(image.png) no-repeat center center;
}

But I can't figure out how to do the same thing with a gradient background color.

Here's what I thought would do the trick, but no luck...

.ui-page {
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgb(50, 50, 50)), color-stop(100%, rgb(200, 200, 200))) url(image.png) no-repeat center center;
}

BTW- this only needs to work in Mobile iOS and Android, which is why I only used "-webkit-gradient" in the example above.

I've also tried separating the background image and background color into 2 different style declarations (using "background-image", and "background-color", respectively), but that doesn't work either. It always uses only the last of those 2 declarations, whichever one that may be.

Any idea what I need to change to make this work?

Thanks!

NotQuiteThereYet
  • 477
  • 3
  • 13
  • 25
  • Answer on your question is on: http://stackoverflow.com/a/2547064/1120798 – Serg Hospodarets Feb 01 '14 at 02:21
  • Thanks Sergey. That appears to be a great solution for desktop browsers, but I'm not sure if it will work in *mobile* iOS and Android browsers (particularly older versions). Could anyone verify this? – NotQuiteThereYet Feb 01 '14 at 02:51

0 Answers0