Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

static fixed bacground... possible?

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi JB,
Is it possible to have a fixed static bg image on Responsive2 where all the elements (header, modules, et) are contained within say white divs/areas and scroll "on top of" the fixed bg?

Many sites do this... I'd like to know if this is possible with R2.
Cheers,
G
  • gg008's Avatar
  • gg008
  • 12 Month basic
  • 124 posts
  • Karma: 0
The administrator has disabled public write access.
You would add it to the body div

then remove the background colour from descendant divs

the css for the background would be something like

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks Paul. I wasn't sure if this was possible (without much customizing) since this template appears to be made of "horizontal bands" which span the width of the page.
  • gg008's Avatar
  • gg008
  • 12 Month basic
  • 124 posts
  • Karma: 0
The administrator has disabled public write access.
You remove those background colours on those bands and then the image shows through underneath

Depending on what you are doing you may need to add back a background colour to the .zen-spotlight divs to cover the content areas

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Depending on the rows your site uses you may just need the body with the image and background cover

and

#zen-wrap {background-color: transparent;}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
So for adding the colour back to certain divs it would require you to target the particular rows spotlight divs

#topwrap .zen-spotlight, #navwrap .zen-spotlight { background: #fff;}

for example
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks,
I'll give it a whirl Paul.

So I understand the nomenclature, what does JB mean when they use the term "zen-spotlight"?
  • gg008's Avatar
  • gg008
  • 12 Month basic
  • 124 posts
  • Karma: 0
The administrator has disabled public write access.
Its the content area of a row in this case

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Thanks. I've never heard the term "spotlight" used for this before. :)
Cheers
  • gg008's Avatar
  • gg008
  • 12 Month basic
  • 124 posts
  • Karma: 0
The administrator has disabled public write access.
No problem

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers