Help with background image - JoomlArt
Resume & Portfolio J! Template Download
version RC is available Free Download
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
  • chriso0258 Friend

    I don’t know if this is the correct forum. If not, please point me in the right direction. I don’t think this is a difficult question, I just don’t know where to look. :((

    I’m using JA-T3 template on Joomla 2.5.4 website. If you visit the test site at, you will notice that around the header image, there is a brown background. I would like to put this background around the entire content area of the site. I don’t want the background inside the content/menu areas.

    From what I can gather, I think this area is defined as #ja-container. If so, can I just add a background attribute to it? If this is not where I need to make changes, where would I go?

    Thanks for any assistance.

    tfosnom Friend

    Hey Chris
    You need to edit the template.css file
    I use topstyle 4 as my css editor a free trial is good enough for what you need go here if you want it
    Using the find feature in topstyle or your edit of choice search for this . . . body#bd

    then follow the instructions below.

    body#bd {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;

    Change #FFFFFF to #170707 That is replace the hex code for white with the code for that particular dark brown

    Your best bet is to get make a small lighter brown textured graphic, then load that image as a url where the background :none is

    If you have major difficulties PM me I’ll find a decent background, have you thought the JA Tiris white brickwork bkg can be applied to this site and being white would save changing text colours etc. the bkg could be grunged up a bit to look darker grey etc.

    Have a think on it
    Blessings Shane

    chriso0258 Friend

    Thanks for your reply. I tried what you said but there was no color change in the background. Here is what is in my template.css file. The commented out parts are the original script.

    body {
    color: #333;
    font-family: Helvetica, Arial, sans-serif;

    /* body#bd {background: #333; color: #333; } */

    body#bd {
    background: none repeat scroll 0 0 #170707;
    color: #000000;

    Sherlock Friend

    Hi Chriso0258,

    I take a look at your header section here and I am not much sure what is the brown background you mentioned, could you please attach e screenshot here ?

    chriso0258 Friend

    I’ve attached the bkgrnd image I want to put in the template.


    I had used this image to make the header by turning it horizontally and then layering the “Tennessee Chess Association” image on top of it.

    What I would like to do is make this image the background of the template (outside the content/menu area). Hope this helps clarify things.

    1. bkgnd
    Sherlock Friend

    Hi chriso,

    you can open the file templates/your_template/css/template.css file and add css similar to this :
    body#bd #ja-wrapper {

    i hope you got the idea.

    chriso0258 Friend

    Thanks for the feed back. I tried your code but it didn’t work. I tried this code:

    body#bd #ja-wrapper {
    background: url("../images/bg_page.jpg");

    but it ended up covering the whole site. 😮 Any other suggestions? I’ll try just about anything.

    Sherlock Friend

    Hi chriso,

    you can try with this css #ja-wrapper {
    margin: 0 auto;
    background: url(“../images/bg_page.jpg”);
    width: 950px !important;

    I hope that code would work

    chriso0258 Friend

    I think we are getting closer. It actually made the background behind the content change and the area outside the content remained the same. Here is an attachment of what it looks like. If we can get the background around the content instead of behind it…

    BTW, I only have a 15″ monitor at home so when I did the print screen, it doesn’t show much around the edges.

    1. background
    Sherlock Friend

    Hi chriso0258,

    You can try with this css #ja-wrapper {
    margin: 0 auto;
    background: url(“../images/bg_page.jpg”);
    width: 970px !important;

    and then you open the template.css file adding this css

    background-color:#ffffff !important;

    I hope this help !

    chriso0258 Friend

    BINGO!!! :laugh: Another mystery solved Sherlock. Bravo!! Thank you so very much.

    giuliano m Friend

    Thanks it was very useful, 🙂 also works for ja Teline IV but I have a question how can I insert a link to the background image?

    Ninja Lead Moderator

    Please send me URL and screenshot on your site. Let me know what background image do you need to add link on your site?

    giuliano m Friend


    Thanks and sorry for the delay :), I sent you my link in private.

    Also you can you tell me how to move down the template to insert a banner

    1. teline-Screenshot_2
    Ninja Lead Moderator

    You can try with my suggestion
    <blockquote>Open templates/ja_teline_iv/blocks/header.php file</blockquote>
    Find this line of code:

    defined ( '_JEXEC' ) or die ( 'Restricted access' );

    add following code underneath it:

    defined ( '_JEXEC' ) or die ( 'Restricted access' );

    <script type="text/javascript">
    $("bd").addEvent('click', function(){'');
    cursor: pointer;

Viewing 15 posts - 1 through 15 (of 15 total)

This topic contains 15 replies, has 5 voices, and was last updated by  Ninja Lead 3 years, 6 months ago.

You must be logged in to reply to this topic.