Background problem :(

Hello everyone!

I have a stupid problem with the background on my website.

I create an image that I want to be on the website but it's too big and the website works slowly. How can I separate the background image in 2 parts using css? I the first image I want to have the top side (from demo), and in the second image I want a small image that repeats.
How can I do this?

Demo link: www.goo.gl/tnm7u

You need to add additional containers to your site, one div to display top image and second for this repeated part. The divide background into two separate graphic files.

Ok, but how can i do that?

I'm not so good at html - css - php code if you can help me I will be very gratefull !

Have a nice day

I think it will be much faster when I make it directly in your installation so please send me ftp details with forum topic link via PM (Private Message), please also prepare this two background files (repeat part of main background) and upload them somewhere to template directory so I can use them in CSS file.

Ok. I sent you the ftp account in an message

Please disable all 3rd party compression plugins and let me know, I've modified stylesheets and now it should be ok but I need to delete old backgrounds that you set.

I deleted the old background, but now it's appear just the first background. The second background doesn't appear. First bg is pattern_bg2.png and the second is pattern_bg3.png

If you want, you can see how is it in this moment here: http://alturl.com/ax5j5

Ok, I've finally fixed this issue. In future please do not modify any css files until you know how to do it, right now you have lot of wrong code so I need to clean it up. I've used two files top.jpg (optimized) and repeat.png. Now the whole background graphics weight 300kB. Now, everything is working but to avoid problems in future updates please copy this code to override.css file and then enable 'Use override CSS' option in template developers settings :

Code: Select all

section#gkPageTop,
#gkMainMenu {margin: 0 auto !important; }
#gkBg2 {background: url("../images/style1/bottom_bg.png") repeat-x scroll 0 bottom, url("../images/style3/repeat.png") repeat-y 0 0 transparent !important}
#gkBg {background: url("../images/style3/top.jpg") no-repeat 0 0 transparent !important}