Joomla Templates Club 406,261 posts

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#183053

I know how to change the background image in template.css but I would like to add silhouetted vines coming out from behind the template on the left and right side of the template. I tried putting in an image where the shadow on the left and right side of the template is but this just put the header and footer out of whack. I basically want the vines to stay in the same position on each side of the template regardless of the users screen size. Is this possible? If so how could I achieve it. Many thanks. 🙂

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

#476024

Might you be able to provide the url of the site you’re working on?

It would also be helpful if you would set “Optimize CSS” to “No” within your Template Manager-General settings.

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#476046

Hi thanks for you reply. I’ve set Optimize CSS to No (forgot about that) and site is http://www.grinderscatering.com.au/newsite/ – just have a dummy stock image in background at moment.

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

#476150

<em>@imatilda 350282 wrote:</em><blockquote>I know how to change the background image in template.css but I would like to add silhouetted vines coming out from behind the template on the left and right side of the template. I tried putting in an image where the shadow on the left and right side of the template is but this just put the header and footer out of whack. I basically want the vines to stay in the same position on each side of the template regardless of the users screen size. Is this possible? If so how could I achieve it. Many thanks. :)</blockquote>

So, just so I can try to understand what you already tried to do … let me know if these are the steps you took:

Within file path –> /newsite/templates/ja_tiris/css/template.css

at line 633, you have the following CSS rule:

#ja-wrapper .main .main-inner1 {
background: url("../images/bg-right.png") repeat-y scroll right top transparent;
margin: 0;
padding: 0 7px 0 0;
}

and at line 628, you have the following CSS rule:

#ja-wrapper .main {
background: url("../images/bg-left.png") repeat-y scroll left top transparent;
padding: 0 0 0 8px;
}

Is this where you tried to apply your “vine” image – i.e., replacing “images/bg-left.png” and “images/bg-right.png” with your “vine” image (for both the left side and right side?

What does your “vine” image look like? Is it similar in structure to the “bg-left” and “bg-right” images – in terms of size and basic idea – for the easiest consistency when you replace?

any of this making sense? 😉

1 user says Thank You to TomC for this useful post

1. Leon Cuzzilla

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#476211

Hi Tom,
Yes that’s exactly what I did. The vines weren’t the same size as bg-left and bg-right as these images are just a shadow of a few pixels. Mine was more like 338px wide and 1000px high. I wanted to use several vines coming out of the sides of the template intermittently. Here are the images similar to what I want to use

🙂

---

Attachments:

1. 

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#477684

Hi, Just wondering if you’d had any thoughts on how to add the larger vine image rather than the templates shadow side images to the template. Thanks:)

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#479911

Hello again, I’ve had a play around with the css but still can’t get the effect I want. I’ve looked around the forums but can’t find a specific answer to this template. If you could have a quick look again it would be much appreciated. 🙂

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#480015

Hi Imatilda,

Please focus in TomC previous post:
<blockquote>Is this where you tried to apply your “vine” image – i.e., replacing “images/bg-left.png” and “images/bg-right.png” with your “vine” image (for both the left side and right side?

What does your “vine” image look like? Is it similar in structure to the “bg-left” and “bg-right” images – in terms of size and basic idea – for the easiest consistency when you replace?
</blockquote>
If it is not what you desired, then post a screenshot to clarify your idea.

Regards

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#480247

Hello, Yes I did replace the images that Tom suggested but because they were larger than the shadow it sent everything out of sink. I’ve attached a screenshot of how I want it to look.

(ignore attached thumbnail – wrong image sorry)

---

Attachments:

1. 

[HeR0 Friend HeR0Join date: August 2011Posts: 3626Downloads:0Uploads:61 Thanks: 33 Thanked: 588 times in 549 posts]

#480273

Hi ,

Please try to add background for body of page in templatec.css file as below:

body#bd{
background: url('image_link.png') no-repeat top center;
}
Example:

body#bd{
background: url('http://static.myopera.com/community/graphics/speeddials/Opera-Background-Blue-Swirls.jpg') no-repeat top center;
}
Regards

1 user says Thank You to HeR0 for this useful post

1. Leon Cuzzilla

[Leon Cuzzilla Friend Leon CuzzillaJoin date: September 2014Posts: 156Downloads:4Uploads:35 Thanks: 44 Thanked: 5 times in 1 posts]

#480362

Thank you so much this is just what I wanted so the images stay static on each side of the template. Many thanks for your time.:D

[Author]

Posts