How to modify Joomla background
I'm currently using the default Joomla design but I want to change the white background of the site to a CSS controlled background. I see that I can change the BODY tag in the template CSS but changing that also changes the background of Joomla's admin. Also, adding the CSS to the index.php file doesn't work either. Any ideas? Site is TechKnowCafe.com. TIA!
have a look at the CSS file for the theme you are changing, you will notice there is a Body tag at the top of the file, but there is also a body tag near the bottom, this is the one you need to change.
Hope that helps.
If you want to change the colour :
this changes the background to red.
background-image: url (images/background.gif);
This changes the background to an image called background.gif which is saved in the images folder on your webspace.
Ok, I tried your info and it still doesn't display the background image. Not sure why because it looks right.
font-family: Arial, Helvetica, Sans Serif;
background-image: url (../images/background.jpg);
I even tried the path as absolute and that didn't work either.
I got it! I put the CSS code in the HEAD tag of the index.php file.
background-image: url('put image path here');
you shouldnt need to do that, but if it works then excellent
SiteGround 73 change background image
[NOTE: solved my issue--see bottom of this post].
Sorry to ask (seen lots of people scolded on the forum), but I have searched both SiteGround and other forums regarding changing the background image for a Joomla 1.0 template for about two weeks, and tried multiple suggestions others received, without a solution.
I am using 'Constellation' (#73), but trying to change the background to our custom wallpaper LBGRND2.jpg
I have changed the CSS to replace BODY-BG.jpg with LBGRND2.jpg, but it only comes up with a blank background--usually black, sometimes white (I messed with the color, thinking the black may have been covering up the wallpaper.
I have tried leaving the CSS alone and deleting the BODY_BG.jpg file and renamine the LBGRND2.jpg file as BODY_BG.jpg, with the same results.
I have tried using a WRAPPER text in the HTMP (index.php) file, but that didn't work. I have also tried the instructions in this thread, but that did not seem to work either (still, black blank background).
Can anyone help me? I am including the initial text that I changed for the edited CSS (first), and the partial original CSS text (second). I am not including the index.php file since the changes I made with that did not seem to have any effect, so I don't think I have made any progress.
P.S. I am wondering if this may be an issue with the unzipped/extracted file folder versus the files within the zipped file. Could the site (still local, unpublished) be accessing the zipped folder which would not have the custom wallpaper in it? The LBGRND2.jpg file is in the unzipped images file folder
background:#000 url(../images/LBGRND2.jpg) fixed bottom center no-repeat;
font:normal 11px Tahoma, Verdana, Helvetica, sans-serif;
background:#000 url(../images/body_bg.jpg) fixed bottom center no-repeat;
font:normal 11px Tahoma, Verdana, Helvetica, sans-serif;
OKAY, I FOUND THE SOLUTION. I had not uploaded the replacement files via CPanel. Here is an excerpt from a thread regarding replacing the Logo, but it works the same for the background by replacing "sg_joomla" in the text below with "body_bg" (thanks Holmancarey):
"Access your cPanel by typing in yoursite.com/cpanel into your browsers address bar. When it prompts you for your username and password enter in the username and password provided to you in your welcome email. That will open a page that has a bunch of different icons. Look for the one that says "File Manager" After clicking on that you will get a window that opens up that has some folders inside of it. Look for the one that says "www" and click the folder icon just to the left of where it says www. Inside of here you should see a folder that says "templates", click the folder icon to the left of where it says templates. Now you will be inside of the folder that has your sites templates. If you haven't changed the template your site uses the default one will be called "sg_joomla", click the folder icon to the left of sg_joomla. Now you should be in your template folder, find the folder called images and open it just like the rest of the folders.
Inside of here is where you will make the change. Find the file named "header_bg.jpg" and click the left mouse button on it. Your screen should now look something like this:
Notice that in the top right hand corner you will have some actions you can perform on the header_bg.jpg file. Click the option that says "Rename File" and type in "header_bg_old.jpg" (without the quotes) for the new file name. Now that you have renamed the old file you are ready to add your own banner to the site. When making your banner you will want to make sure the size is about the same as the one it originally had (so it's looks nice) I believe the default size of the banner is 760 pixels wide X 115 pixels tall although only about 360 pixels of the left side of the banner is viewable. That's a different topic though
Once you have the picture you want to use for the banner (I'm assuming you do since you are wanting to change the banner) from the File Manager window you have opened click the link that says "Upload Files" as outlined in this picture:
That will take you to a screen with a bunch of boxes that have a Browse... button next to them. Click the top button that says "Browse..." and then browse to where your new banner is located at on your computer. Once you have selected the file click the "Open" button on the window and when it closes you will now see some text entered into the first box. Click the "Upload" button at the bottom of the boxes and wait for your file to upload. Be sure to not close the window at this point or the upload process will be aborted. Once it takes you back to where all of the files are listed at your file will now be uploaded. Look for it's name in the list and click the left mouse botton on it. Notice the text in the top right hand corner again, and click where it says "Rename File". Type in the name header_bg.jpg and then click "Rename"
Last edited by kokopel1; 06-02-2008 at 10:29 PM.
Reason: solved issue
3 If the background color behind this header image was changed, the change would be seen in all the areas of this
logo that are not solid colors. This is done through CSS Z-Index settings. You don't really have to worry about
this, but when you replace this header, it will save you a lot of time and work if you create one that is the same
1) Log in to your site.
2) In the row of menus across the top, go to "site"
3) Choose template manager in the drop down menus
4) Choose Site templates in the menu that slides out to the side
5) When the page loads, put a check mark in the box next to your default template.
6) Click "Edit CSS" in the top right hand corner.
7) Make the changes to your CSS file that you wish to
8) Click the disk icon to save.
Hi, just been messing with artiseer and the background wasn't working i.e. it was supposed to be fixed but was still scrolling with the sheet although underneath it also displayed the same background.
I've just read this post and noticed you had set the background to "Bottom Center" so I too set the background to "Bottom Center" and it is now working as I wanted, the background doesn't move but the sheet scrolls, thanks for the incidental info lol!
This is the css that worked for me, the file name is template.css and the actual CSS is:
margin: 0 auto;
background-position: bottom center;
As a side note When I installed Joomla I also had the option to enable eXtplorer this really makes editing files on the Joomla install very easy and no logging into the cPanel. I live in the UK so I am currently hosting with 123-reg they are ok but had a few problems with hosts who use Joomla and Drupal but they seem to have sorted that out now. I'm not sure whether eXtplorer comes with Joomla as standard but if it does I would definitely recommend it. You can download it as an extension: eXtplorer
Once again thanks for the info
Upload your background image to the template images folder via FTP (templates/pwc027_beach/images/), and change the same css code:
margin: 0 auto;
background: #FFFFFF url('../images/background.jpg') no-repeat top center;
Insert the right extension for your background image: JPG, JPEG, PNG, GIF !
Hi, top center doesn't work for me, but bottom center work perfectly: Mansfield & District Male Voice Choir
Originally Posted by ajith
ps: comments and/or tips advice welcome on the site.
to get things done quicker i suggest to use the firebug plugin for firefox.
Loved your Joomla site!
I'm new to Joomla, recreated my website for work with it, but it's pretty plain. Default template with a new header is about as far as I've taken it. Saw yours with the choir hall background and then the green trees, loved the juxtaposition of it. Also liked the photos inline with the text (paragraphs), all of my photos were after the pictures, never in line.
Originally Posted by darkan9el
What template did you use? What other extensions? I saw the photo one, that looked like it worked really well. The extensions I had tried seemed to give me garbage code so I'm afraid to use just any extension so I don't trash the site. I have one running on my local machine to test out first.
By achab in forum Hosting Related Questions
Last Post: 08-11-2010, 10:33 PM
By elcholoperuano in forum Free Joomla Templates
Last Post: 08-09-2010, 09:04 AM
By myrab in forum Forum Applications
Last Post: 09-21-2008, 11:30 AM
By masterfriend in forum Hosting Related Questions
Last Post: 08-29-2007, 11:54 PM
By nzgreenp in forum General Joomla Discussions
Last Post: 03-14-2006, 05:30 PM
Tags for this Thread
Copyright © 2012 SiteGround.com Inc