Joomla Templates Club 406,261 posts

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#143455

Hi all

This is urgent. I need to add a background image to my Sulfur template.

As you will know the modules currently have a light colour background behind them and fill the whole width of the page. I expect that I need to reduce the width to 973px and centre.

The modules i’m using are; ja-header, ja-topsl, ja-container, ja-botsl, ja-footer.

Or is there an easier way to do it?

I have tried adding a url path to an image in template.css but it didn’t show.

Thank you for your help. Please help! :((

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314232

Hello,

Can you please suggest a live link. I am not getting what you are trying to do?

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314234

Attached is an example of what I am trying to create. This will help you understand better.

---

Attachments:

1. 

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314240

Hello,

Let me just clarify.

Do you want to reduce the width of the whole template ? That Image is not show what you are trying to do.

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314241

I want to change the template so that a background image can be added, not a colour. I have put a green colour to show you in the image. The image will go behind the content.

Naturally, i thought the content panes/wrapper will need to be reduced – but i’m no expert.

Thanks

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314247

Does anyone know how to do this?

I posted this 2h 30 ago :((

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314249

Hello,

The background color can be changed by going to template.css and by adding this ->

body{
background: url(../images/bg.jpg) top center no-repeat !important;
}

This will do what you are trying to do. The background will ofcourse be visible, but if you want it to be visible at 1024 x 768 then you need to change the width of the main containing div.

If you give a live url (as i suggested in the first post).. then I can check your code and get this done.

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314252

It’s currently at clientdemo.co.uk.

I added your code above to ‘body’ but it didnt work. Did you mean ‘body#’?

Thanks

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314253

Hello,

Find line 20 on template.css . You will find

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

Just change this to something like this :
body#bd {
background:url(../images/your_bg_name_here.jpg) top center no-repeat;
color:#555555;
}

This will let you put an image in the background. As I am seeing at a resolution of 1280, I will be able to see the background, but if you are developing for 1024, then you might have to reduce the width of the whole template.

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314254

Thank you – but I still need to reduce the white area. The centre of the page. Can you see this?

This is what needs shrinking to sit in the middle, at 973px wide.

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314255

Hello,

Ok. Now you are confusing me.

First in the attached image you mentioned that you wanted to change the color to where the green was in the image you attached.

Now, tell me, do you want to change the background color of the actual website, or the space that is left on the left and right?

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314256

Look s like i confused you by putting a colour where the image should go. Have attached a new graphic.

I want to add a background image so that it shows around all four sides of the middle content.

Basically like putting an image background on, then dropping a square box in the middle?

Thanks

---

Attachments:

1. 

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314259

Hello,

Yes Great! Now I think I understand what we are trying to do 🙂

First things first… Can you put the correct image about the golfer so that I can give you instructions on what needs to be done.

You will have to follow them carefully, as we are trying to do a few things.

Regards,
Mihir Chhatre.

[munders Friend mundersJoin date: November 2008Posts: 375Downloads:0Uploads:37 Thanks: 50 Thanked: 4 times in 1 posts]

#314260

Hi

I’m going to use a small image instead, that repeats. It’s called turf.jpg.

[mihirc Friend mihircJoin date: December 2008Posts: 597Downloads:0Uploads:3 Thanks: 62 Thanked: 95 times in 39 posts]

#314261

Hello,

Ok, so the first thing we need to do is make the background repeat the whole page. So remember the code we put in the body#bd, just make one small change to it.

body#bd {
background:transparent url(../images/turf.jpg) repeat scroll center top;
color:#555555;
padding-top:30px;
}

What we have done is made the image repeat the whole background. Also I have added a 30px padding to the main body, so that it shifts down, as you asked in the image file attached.

Then we have to fix all the other parts to make the background white.

Do this and then tell me.

Regards,
Mihir Chhatre.

[Author]

Posts