How to show a background image outside of ui-page, in side columns

How to show a background image outside of ui-page, in side columns

  I try to reuse my jQuery Mobile Website for smartphones now for big screens.  I could shrink the main Content column/space, so I think its easier to read. But on both sides there is now an empty space, where I would like to show a backgroundimage.

I tried to use the body tag, ui-page,and body.ui-mobile-viewport

I could get a background for the middle column, the content space, what is not what I want, but no background for the two side columns.

Any idea how to show a background image in the side columns?

  1. <style> /* Breitenanpassung PC, width change fr pc */ @media only screen and (min-width: 64.1em){ .ui-page{ width: 45em !important; margin: 0 auto !important; position: relative !important; border-right: 0.3em #666 outset !important; border-left: 0.3em #666 outset !important; background : url('http://beta.mondkalender-mobil.de/templates/Mondkalender-mobil/images/hintergrund_breit.gif'); } </style>`
What it looks like now: