How to make a module background image that covers the screen

http://wecare.bz/index.php/our-service

If you scroll down you will see an image that floats in the middle of the screen. I want to make the entire module that image, IE no space at the top or bottom or sides...

How do I make this possible?

Hi

Try add this to override.css file

Code: Select all

#gkBottom2 {
background: transparent url("http://wecare.bz/images/woods.png") no-repeat scroll center center / cover ;
}


That would change the background of all gkbottom2 across every page
Lets say I only want GKBottom2 on page X?

Hi

In this case best is to use page class suffix. Let say You will called this page class suffix "page_x" so code will be like:

Code: Select all

.page_x #gkBottom2 {
background: transparent url("http://wecare.bz/images/woods.png") no-repeat scroll center center / cover ;
}


Here is a link to example how to manage this suffixes with our templates: https://www.gavick.com/documentation/jo ... omla-pages

okay nearly there, I tried adding a new page suffix to what I currently have "120= imageBg" but each time i do, the main background image disappears.

How do I add a new suffix to this?

If You have a suffix attached to this page already than add both at the same time:

Code: Select all

120= imageBg page_x


Sorry I mean i want to do this for Page 120 and lets say another one for page 131

Hi

Than You just need to add 2 separate rules, one for 120 and other for 131

Code: Select all

120= imageBg page_x
131= imageBg page_x


Okay great, this works absolutely fine on all the Bottoms however the code doesnt seem to work on Top or Mainbody...I will leave my site with the error so you can see

http://wecare.bz/index.php/our-services
Check here...
And the relevant code is...
.page_x #gkMainbody {
background: transparent url("http://wecare.bz/images/woods.png") no-repeat scroll center center / cover ;
background-size: cover;
}
.page_x #gkBottom3 {
background: transparent url("http://wecare.bz/images/woods.png") no-repeat scroll center center / cover ;
background-size: cover;
}

Hi

Please look at the code of Your site. There is no #gkBottom3 there, just #gkBottom2, so You probably need to adjust Your code to point into this layer:

Code: Select all

.page_x #gkBottom3 {
background: transparent url("http://wecare.bz/images/woods.png") no-repeat scroll center center / cover ;
background-size: cover;
}


got it - working well, ty

Hi

Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro on Facebook: http://www.facebook.com/gavickpro