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.

Add background image

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

Hello-
I would like to add a background image to this template. I did a search of the forum and say a few other posts on the same topic. I tried each of the suggestions in the other posts and none of them worked for me. Can you please tell me what CSS code I need to add? Thank you in advance for your help.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
Are you using the 'stand-alone' Responsive theme or the Responsive theme within the Build.r template package? Adding a background image to any theme within the Build.r template package is very easy.
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
Thanks Ed

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
I'm currently using the stand-alone Responsive theme but will download the Build.r template. Thank you very much for the response.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
Hello-
I downloaded and installed the Build.R template and I don't see where to add a background image. Since I already have the stand-alone Responsive template set up the way I want, how would I go about adding a background image. Thank you in advance for your help.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
Is the background covering the whole of the sites background?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Yes, it is. Thank you for the quick response.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
Create a new 'custom module'. Add your background image into to this module, assign it to the menu pages you want it to show on, click No for show title and assign this module to the background position. Don't forget to Publish this module and Save. If all goes as planned your background image will show-up.
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
The following user(s) said Thank You: manh
Unfortunately, that didn't work. I really appreciate the help with this.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
Sorry... gave you instructions for the Buildr-background theme. my bad! Let me poke around with my local install and see if I can assist before Paul jumps in and takes us both to school :P
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
The following user(s) said Thank You: manh
I think from memory its

#zen-wrap {background-color:transparent;}
body {background:red}

replacing red with the image

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
HaHa... thank you :)
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
working?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
If you want an image as your background, follow my instructions regarding the module position and then add the following CSS into the 'custom.css' file;
#zg-background {
	position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
    overflow: hidden;
}
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
The following user(s) said Thank You: manh
Hi Paul- I was responding to Ed's comment about you schooling us both :) Where you wrote to replace 'red' with the image name, do I need to put the path for the image in? i.e..... /images/sitebackground.jpg
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
yep if using the custom.css I suggested
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
So it should look like this?
{background: /images/SiteBackground.jpg}

I tried the code that Ed suggested (thank you!!!) but that didn't work.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
do you have a link for the site?
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
  • New Way Technologies's Avatar
  • New Way Technologies
  • 3 Month Basic
  • 25 posts
  • Karma: 0
The administrator has disabled public write access.
try adding

#zen-wrap {background-color:transparent;}
html, body {background: url(/images/SiteBackground.jpg);

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