Joomla Templates Club 406,261 posts

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#197320

I am trying to add a background image, see the screen shot, can anyone tell me how I could do this?

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533330

So that we can try to best assist you, please provide the url of the site you’re working on

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533332

http://www.sacredknowledge.org.uk

to access site (not admin cp)

un: Ahsan
Pw: ah54n86

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533335

<em>@ahsanashraf 424882 wrote:</em><blockquote>I am trying to add a background image, see the screen shot, can anyone tell me how I could do this?</blockquote>

To change the background of your inner content area (currently white), put the following CSS within your custom.css file:


.container {
background: none repeat scroll 0 0 #FFFFFF
}

From here, you only need to modify the color code for the background color – which, is currently set at white, or #FFFFFF. The following is information on how to find various color hex codes –> Web Color Hex Code Resources

Similarly, to modify the outer background color, you would put the following CSS within your custom.css file . . .


body {
color: #777777
. . . and then, like the previous example, modify the color code accordingly.

If you want to use an image, than you need to first identify the image you want to use and upload it into your site images file –> /templates/ja_biz/images <–. You would then identify the file path within the above noted CSS rule. Depending on the image, there may or may not be some additional CSS properties required.

1 user says Thank You to TomC for this useful post

1. ahsanashraf

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533336

Thanks will give this a go, also what about the grey background, as I want to use an image bg? Thanks

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533341

I know it looks horrible right now but testing it out. The image starts under the menu and I don’t want that? and it covers the footer too? Any ideas?

Thanks

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533345

You Bet’cha . . . .

Add the following to your custom.css . . .


t3-mainnav .container {
background: none repeat scroll 0 0 #FFFFFF;
}

.t3-footer.container {
background: none repeat scroll 0 0 #FFFFFF;
}

Of couse, if you don’t want a white background color, you can play around with whatever color code you want.

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533348

The footer still has the background in their aswell as the mashead-2 and mashead-1

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533351

<em>@ahsanashraf 424902 wrote:</em><blockquote>The footer still has the background in their aswell as the mashead-2 and mashead-1</blockquote>
Where are you wanting that background image to be – inside container or outside background?

I advised as to how to modify each separately within Post #4

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533352

I want it to be inside the container but don’t want masshead1 mass head 2, menu or the footer to be effected?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533353

<em>@ahsanashraf 424906 wrote:</em><blockquote>I want it to be inside the container but don’t want masshead1 mass head 2, menu or the footer to be effected?</blockquote>

Show me where – in another screenshot – you want the background to be white (or different color, whatever)

[ahsanashraf Friend ahsanashrafJoin date: May 2011Posts: 57Downloads:7Uploads:16 Thanks: 20]

#533354

Just the white bit below the slideshow and above mastheads

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#533356

<em>@ahsanashraf 424908 wrote:</em><blockquote>Just the white bit below the slideshow and above mastheads</blockquote>

Okay, this is the CSS you need to work with (within your custom.css) . . .


.home .t3-mainbody {
background: #FFFFFF
}

Modify the background property with whatever color code or image file path you wish.

[Author]

Posts