Background image in Joomla template

Olaf Berli
Olaf Berli used Ask the Experts™
on
I'm in the process of (manually) upgrading a site (www.reverse-therapy.no) from ver. 1.x to 3.x.  The old site had a nice background image, included in the template (jbelevate2). New template (Lifestyle2 from Joomlabamboo) doesn't seem to have any background image. Is it possible to use my own photo as a background? If so - how ? Will an image like this have any negative effects on the pages, like mobile friendliness, speed etc.?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004
Commented:
You can probably apply the background image in your CSS, but you'll have to examine the template to see how too work it in.  In the worst case scenario, you can edit the template to add the structure you need to support your image.

As with all web pages, adding images makes it load more slowly.  You can use media queries to avoid loading the image for smaller screen sizes, though.
Olaf BerliOwner

Author

Commented:
Thanks for the info.
Checked the article. It seems, however, to be written for an old version of Joomla (1.x?). In the template manager in version 3.x there are many .css files.  Tried to enter the background code in some of them, but page background didn't change. Maybe there is another way to do this in 3.x?
Fundamentals of JavaScript

Learn the fundamentals of the popular programming language JavaScript so that you can explore the realm of web development.

Olaf BerliOwner

Author

Commented:
Steve Bink, Thanks for your feedback. As indicated in another response, there are a lot of css files in the template, and - unfortunately - my knowledge in the css area is limited. So - hesitate to experiment too much.
Top Expert 2004

Commented:
Looks like you'll have a little bit of learning curve to go through.  This tutorial should be enough to get you started.  Basically, you want to edit the background-image property of the element, and perhaps some other related properties.

The other half of the equation is figuring out which element should receive the image.  If you're familiar with Chrome's dev tools or Firebug, this should be pretty easy.  If not, then you have a little learning here as well.  

If it comes down to editing the template, that can be kind of touchy.  I don't recommend this course unless there's just no other way to do it.  My best advice is to make a backup, and start fiddling with stuff.  If you screw something up, restore, and start again.  If you can post a link and/or the HTML, template files, etc., we can help narrow it down for you.
Hi,
If you want to waist too much time on it
There are great cheap Joomla theme
http://themeforest.net/category/cms-themes/joomla
Olaf BerliOwner

Author

Commented:
Thanks for the feedback.

Steve Bink: Yes, there seems to be a lot to learn - not only css, but also the design and inner workings of the template.

lenamtl: You're right - waisting too much time on this. Will probably do so if I go for another template now - after adjusting most of the things I want in the template I'm using now.

Thanks again for all your help!

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial