720 px bg image not loading

Hi,
When I reduce screen size my 720px bg image isn't loading.
it is in correct place alongside the others
http://198.1.77.148/~alma2/templates/gk ... /bg720.jpg

site: http://198.1.77.148/~alma2/

Any help, or a push in the right direction would be gratefully received.

Thanks.
Darren.

Hi,
sorry but I don't understand but now you have background on your page.
You want to have different bg image for mobile view ?

If yes you should use proper @media to override background image when screen will be smaller then xx pixels.

Use can use my code:

Code: Select all

@media all and (max-width: 720px) {   
body { background: url("../images/bg720.jpg" ) no-repeat; }

 }

IMPORTANT:
I saw that you made a little mess in your CSS code, you style is loading bg image 2 times, probably that why you have problems with mobile view.

bg-2-times.png

Second in line 24 (template.css) you have used "!important" - please read more about it before you ask another question.

Hi Pawel,
Thanks for that - I will try your code to get it to work.

That wasn't my edit though - that is how the template comes -
it has 4 bg images for the demo and loads each different one for a responsive display.
I just replaced with my style background and it works for 3 of the bg images but not the 720px one.
This is mine:
http://198.1.77.148/~alma2/templates/gk ... /bg720.jpg
This is on the Gavick demo:
http://demo.gavick.com/joomla25/fest/te ... /bg720.jpg

There are 3 others a very wide:
http://198.1.77.148/~alma2/templates/gk ... ges/bg.jpg
and two more.

So I would have thought just changing the 720px one would work, but it doesn't - perhaps I have messed something up without realising.

I will get a chance to try your override on Monday morning.
Thanks again.
Darren.

Hi Pawel,
Thanks for that - I've tried it and it doesn't seem to work. the 720 px image not loading.
What do you think ? did you see my last post regarding how the original template is set-up?
Thanks
Darren.

Hi Pawel,
I was wondering if you would mind taking a look at this again for me - I haven't been able to get the 720px background to load. Please see screen grab attached of the css for the demo template on Gavick site with the css - I didn't change any of this - I just replaced the images.
I hope you can help.
Thanks
Darren.

http://tinypic.com/r/20p7upf/5

Hi Pawel,
Thanks for your help before - I really appreciate it. I got a job paid for today so I'm going to register for a developers license, because I know I am going to be using Gavick a lot. Just didn't have the funds available until now.
Once again thanks.
Darren.

I have the same problem. The 720bg isn´t showing.
I have changed all of the backgrounds (bg, 1920bg, 1280bg and 720bg) but only the three first are showing. On my mobile (and when I reduce the size of my pc screen) the original background picture that came with the template is showing.

Did you find any solution to this problem?

Regards, Anita