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.

How to add image to site background

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

Hi guys

How can I add an image for the background of the site.

My urban looking site....I think LOL Urban Design

I think it would be cool to have one big image behind instead of the colour.

How could i do this....PLEASE

cheers pete
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
In your 'theme.css' file,

Add this as your first line command;
body {background: #fff url(../images/YOUR_BACKGROUND_IMAGE.jpg) no-repeat center top}

Make sure you image into your template's image folder. This command will take an image and place it at the top, center it and it will not repeat.
If you have a pattern background you would like to repeat, use this command;
body {background:#fff url(../images/YOUR_BACKGROUND_IMAGE.png) repeat-x left 0 fixed}

You'll want to make sure the image path to your background is correct in these code lines and set the background color (#fff) to whatever fits your needs.

This should get you started.

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
many thanks for that

just need to find the right image now!

cheers Pete
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
Pete,

Thanks for posting back. Ya, finding the 'right' image is always the hard part... code is much easier to manage!

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
Hi guys

I really need to learn how to build templates lol

perhaps I am going too far, but I like where this is going.....though trial and error.

I added an image i kind of like but then i had the idea of having either a transparent template or NO template colour background.

which i kind of like BUT i can not seem to get the font to change colour when i use No Hilite

so switched to blue css and trying to edit blue.css I can see where to change links colours and menu items

HOW CAN I CHANGE NORMAL PAGE TEXT TO A LIGHTER COLOUR??

Please advise.....?

Regards Mad Pete
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
Last Edit: 13 years 7 months ago by Peter haken.
The administrator has disabled public write access.
theme.css overrides template.css, so you should make all your changes there.

the global font color is set in the body rule, line 4 theme.css
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Hi Guys

I still can not see it.....

In the end I had made so many changes, i have just reinstalled templated, added images coding and removed background colour codes.

Where can I change text colour to fff, I have looked in template theme.css (within template mng) plus looked in blue.css as i have it set to blue withing template settings.

regards Pete
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
Last Edit: 13 years 7 months ago by Peter haken.
The administrator has disabled public write access.
agghhh found it in zengridframework template_css.css I have spent ages looking in theme.css blue.css...

Have I done this right...looks ok to me

now to play with twitter mod css
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
Peter,

Just had a look at your site... "I like it, nice job!"

Ed
  • Ed's Avatar
  • Ed
  • LIfetime Developer - Big Bamboo
  • 1693 posts
  • 45 Thanks
  • Karma: 60
The administrator has disabled public write access.
Cheers... Going to tweak some more, better graffiti and a better way to show clients site.

Do you think image size is to big I loaded up 1800 by 1200 lol perhaps too big! ??

thanks pete
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
Last Edit: 13 years 7 months ago by Peter haken.
The administrator has disabled public write access.
Hey Peter,

Without worrying too much about the resolution I'd look at the file size for the image first. How long it takes to load will be dictated by that.
If it is possible to make the background image tile seamlessly then you could have a smaller image and set it to repeat horizontally and vertically in the css.

Cheers,
Jason.
  • Jason D's Avatar
  • Jason D
  • 6 Month Developer
  • 2957 posts
  • 12 Thanks
  • Karma: 75
The administrator has disabled public write access.
Hi

I have uploaded a lower res image and have made it 1280 1024, so better I think?

I have a couple of validation errors now, but an not seem to find where I edit them as still trying to get used to Bamboo.

Validator

where can I change these?

I used to get errors when using Tinymouse editor but as standard I switch to JCE editor.

Thanks guys
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
Hi Peter,

I would have to agree with Jason, having a seamless image that can be repaeated is really the best option. I am viewing on 1920x1200 so I can see the edges of the image. Tha alternative is to make the edges of the image fade to a solid colour. You can then set that colour as the body colour and have a seamless edge blend.

The first error is definately coming from the footer.php override, as you neglected to remove an <a> tag. Just remove that and it will be fixed. The 2nd error is trickier, because *somewhere* in the code you are missing a </div> tag. The best way is to go through the source, line by line, until you find where the </div> is mssing. The quick-fix is to just add an additional </div> somehwhere near the end (you can add that to footer.php even). It shoudl resolve the error, but it would be a bodge rather than a true fix.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
Hiya

First error removed but can not seem to find the other error.

I have used this template for one of my clients also and it has the same error. I thought perhaps it was where i temoved the Joomla bamboo footerid in zengridfrmework, so i removed zengrid framework and reinstalled so it shows joomla bamboo footer then checked in validator.

validator

both sites showing same error.

Clients site and My own site

any ideas
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
You removed the footer by editing the ZGF index.php?
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
yes index.php in ZGF was that correct?
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
The administrator has disabled public write access.
No. You don't need to modify any ZGF files, ever. If you upgrade ZGF you lose those changes. It is far better to just override the output, which is simple.

All you need to do is copy this file:

zengridframework/assets/layout/footer(unbranded).php

to

zendefault/layout/

and rename it to footer.php

Then just ensure the footer override is enabled in the template settings.

That way, all changes to your template are located within the template itself, and you can safely update template or framework without blowing away your changes.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.
AArrghh I have now changed to the Zen blank, better for my clutter free look.

OK i have started up my FTP and copied file over to Zenblank/layout and renamed to footer.php

This has enabled the over ride so now not showing bamboo footer.

many thanks
  • Peter haken's Avatar
  • Peter haken
  • 6 Month Developer
  • 324 posts
  • Karma: 0
Last Edit: 13 years 6 months ago by Peter haken.
The administrator has disabled public write access.
No problem.
  • Seth's Avatar
  • Seth
  • Moderator
  • 8358 posts
  • 225 Thanks
  • Karma: 202
The administrator has disabled public write access.

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

Happy Campers