Question

I have a site where im using a div as a background(as oppose to putting it in the body as I need to center it properly)
Here is the site, http://asystec.hailstormcommerce.com/

Here is the css:

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.backgroundwrapper {
background-image: url('images/asystec-mobile-bg.jpg');
background-position:center 188px;
        }

}

.backgroundwrapper {
background: #fff url('images/pageBgOld.jpg')  no-repeat;
background-position:center 188px;
height:1903px;
width:1903px;

}

Ive tried clearing cache on browsers, but it is definitely loading the pageBgOld image as oppose to the new one.
Any help would be great.

Answer 1

Write media query after your main style. Write like this:

.backgroundwrapper {
background: #fff url('images/pageBgOld.jpg')  no-repeat;
background-position:center 188px;
height:1903px;
width:1903px;

}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
.backgroundwrapper {
background-image: url('images/asystec-mobile-bg.jpg');
background-position:center 188px;
        }

}