Background image overlay?

**GK User** Fri Jun 22, 2012 12:46 am

How does one change the grey background on the Music Template to also include an image overlay? so my background remains grey, but then has a background image starting at top and fading out to original grey background?

**GK User** Fri Jun 22, 2012 5:25 am

You can add extra div to wrap around the whole page and give that a background.

For example current Template: Layout ( left the bottom part out due to length for this example)

Code: Select all: <body> <div id="gkPage" class="gkMain gkWrap"></div> <div id="gkBottom2" class="gkWrap clear"></div> <div id="gkFooter" class="gkWrap"></div> </body>

You can add extra wrap around so it looks like below.

Code: Select all: <body> <div id="ExtraDiv"> <div id="gkPage" class="gkMain gkWrap"></div> <div id="gkBottom2" class="gkWrap clear"></div> <div id="gkFooter" class="gkWrap"></div> </div> </body>

Let me know and i ll post required changes.

See you around...

**GK User** Fri Jun 22, 2012 8:00 am

Which files do i need to adjust? please let me know, also what CSS would i need to include to control the image allocation?

**GK User** Fri Jun 22, 2012 8:32 am

I am sorry I have read your request wrong. I though you want to display dual image as background. So no modifications required for image and color usage.

To use image and color simply use below css code in your override.css located in templates/gk_music/css/override.css and enable css override from template settings > advanced settings > css override.

Code: Select all: body { background: url("../images/bg.jpg") no-repeat scroll center top #F5F5F5; background-size:100% auto;}

Upload / rename your image to templates/gk_music/images/bg.jpg

See you around...

**GK User** Fri Jun 22, 2012 8:57 am

Okay, i think its a mix of both, here is an exact example of what id like to achieve:
http://www.ausgamernetwork.com/FrontPageDesign2.jpg

**GK User** Fri Jun 22, 2012 9:06 am

For your example css code I have given you will work. Image will be on top covering full left to right but not in height and then where image height is finished normal color will be visible.

So in our example first image is loaded then rest of the page is filled with "#F5F5F5" color. So choose a color which will blend in with end of image.

See you around...

**GK User** Fri Jun 22, 2012 9:52 am

Thanks! - 1 little issue, how do i ensure the footer stays light grey? please see site at bottom:
http://www.ausgamernetwork.com

**GK User** Fri Jun 22, 2012 9:57 am

Please also add following css into override.css and adjust #fff color to your liking.

Code: Select all: #gkFooterWrap { padding: 0 10px;} #gkFooter { background: #fff;padding-top: 5px;}

See you around...

**GK User** Fri Jun 22, 2012 10:19 am

LOOKS AWESOME THANK YOU!

**GK User** Fri Jun 22, 2012 10:21 am

No problem at all, see you around...

**GK User** Wed Jul 18, 2012 5:15 pm

Hello, I´m also having some problems with the background. I like to add two images in the background, one for the footer part and one at the top of the page. Both are larger than the maincontent part. Like they did it on this page: http://vitabody.de/
And I like to do this for that page: http://tuerkei-hotel-info.de/

Would be glad if somebody could help me quickly.

Thanks so far ...

**GK User** Thu Jul 19, 2012 8:18 am

Try following css code in your override.css file.

Code: Select all: html { background: url("../images/backgrounds/bg.jpg") no-repeat scroll center top #AED4EB!important;} body { background: url("../images/backgrounds/bg.jpg") no-repeat scroll center bottom transparent!important;}

See you around...

**GK User** Thu Jul 19, 2012 8:59 am

Thanks a lot i gonna try this

**GK User** Fri Jul 20, 2012 7:53 am

No problem at all, see you around...