Displaying background in mobile view

Hey guys!

Is it possible to display the background-image in mobile view?
If you have a look here, the background disappears in mobile view and changes to black...
http://www.paganfest.eu/

Thank you very much for your support!

Yep, but ... I suggest to use much more optimized img for background -- bigger compression, smaller size.

Hey Oscar!

Which image do you mean exactly? The bg720.jpg?
Would be absolutely no problem do shrink the image - but how can I get it displayed?

Code: Select all

@media only screen and (max-width: 480px)
{  background: url("../images/bgMobile.jpg") !important; }

I hope that you will be able to use it
bgMobile.jpg - your new "mobile" bg image !

Didn't change after inserting the code and uploading the image.

Image lies here:
http://paganfest.eu/templates/gk_fest/images/bgMobile.jpg

Here's my full custom code:

Code: Select all

.gk-sponsors h2 {
    color: #FFF;
    font-size: 50px;
    font-weight: 900;
    line-height: 90px;
    text-align: center;
    text-transform: uppercase;
}

body {
    min-height: 100%;
    background: url("../images/bg.jpg") no-repeat no-skroll center top #000;
    background-attachment:fixed;
    font-size: 14px;
    line-height: 2;
    color: #AAA;
    padding: 0px 10px !important;
    font-weight: 400;
    word-wrap: break-word;
}

    @media only screen and (max-width: 480px)
    {  background: url("../images/bgMobile.jpg") !important; }

#gkHeaderTop { margin-top:0; padding-top:50px;}
 #gkPageTop {position:fixed; width:100%;}

Well - i managed to get to the point I wanted - but I had to do the changes in the template.css - what is quite uncool if I have to update the theme...

I replaced this code:

Code: Select all

}
 @media (max-width: 720px) {
body {
   background: #191919!important;
}


with that:

Code: Select all

}
 @media (max-width: 720px) {
body {
   background-image: url('../images/bg720.jpg')!important;
}
}
 @media (max-width: 480px) {
body {
   background-image: url('../images/bgMobile.jpg')!important;
}

If you have any ideas how I can get the same effect with the custom.css - I'd really appreciate your tipps!

Greetings
Ingo

wait until you will crash something, how to use custom code was from the beginning in my footer link.

I know how to use custom.css - all other adjustments I made there (see code posted two messages ago) had the wanted effect. But the issue with the mobile background did not have any effect on the page at all... :-/

When I resized your current website I saw background.
http://quirktools.com/screenfly/#u=http ... 7&a=37&s=1

Also on my smartphone (real device!!) I saw background image.

So maybe it's cache problem?

p.s.
Ask your friends to test on their smartphones > Samsung, HTC, iPhone.