Banner as site background

Hello,
I'm trying to put a banner as a background of Boutique like the background image of GameNews Template.
So far I was able to show the banner as background and center it in the page, but I cannot make clickable the banner link.

I've set these modification to css:

Code: Select all

.BackgroundBanner {
  position: fixed;
  top: 0px;
  width: 100%;
  overflow: hidden;
  z-index: -1;
}

.BackgroundBanner img {
  position: relative;
  right: -50%;
}

.BackgroundBanner .banneritem {
  display: inline-block;
  position:relative;
  float: right;
  right: 50%;
}


I've put the banner in 'debug' module position and applied the BackgroundBanner class suffix, but this way the link isn't clickable.

I've tried to remove the z-index from BackgroundBanner and I've applied a z-index of 10 to #gkPage: this way I can click the banner, but not all content stay on top of the background image... is there a way to set ALL content under #gkPage div to use an higher z-index?
(I made tests on a local site, so I can't link you to an example)

Well, I find a solution: I put all gk* divs under a div container with z-index=2 and let the background banner to default z-index.

I think the ability to put a banner as site background could be a nice feature to have in the framework. Maybe in future versions...

Hi

Can You please show me this ? I cannot visualise how should it looks like in the first place.

Hi

Can You please show me this ? I cannot visualise how should it looks like in the first place.

Hi, sorry for the delay in the reply...
I've implemented my solution on the website, you can see it here: http://www.energmagazine.it/

I've edited the default.php layout to put gkPage under a new div container (#contenuti) with z-index=2, I've created a new module position just before #contenuti where to put the banner and I've applied the class .emBannerSfondo to the new module position.

Here it is the full override.css:

Code: Select all

#gkPage {
  margin-top: 85px;
  width: 980px !important;
}

#contenuti {
  position: relative;
  z-index: 2;
}

.emBannerSfondo {
  position: fixed;
  top: 0px;
  width: 100%;
  overflow: hidden;
}

.emBannerSfondo img {
  position: relative;
  right: -50%;
}

.emBannerSfondo .banneritem {
  display: inline-block;
  position:relative;
  float: right;
  right: 50%;
  padding: 0px;
}


The banner image should be the right size to wrap around main content width (in my case 980px).
Maybe there's a more easy and elegant solution for this... I think would be nice to have something similar available in Gavick framework!
Thank you.

Hi

Yes this is a good solution, but You will have to keep this changes in mind during template updates. What I was thinking was to use a 3rd party module which rotates site background, less invasive, but Your solution works as well