Joomla Templates Club 406,261 posts

[tulioc Friend tuliocJoin date: March 2013Posts: 59Downloads:0Uploads:19 Thanks: 18 Thanked: 1 times in 1 posts]

#192472

HI there,

How can I add a transparent image background to the front page. Please see the image attached the blue squares.
I don’t want to change the background, just add the image in transparent to it.

Thanks,

Tulio

---

Attachments:

1. 

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

#513195

Any chance you can throw together a screenshot mockup of the look you’re going for – i.e. add the transparent image in Photoshop or something – so we can better understand what it is you are wanting to accomplish and how we might be able to suggest you get there ??

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#513271

Hi Tulio,

I need to say that it will be quite hard to add the transparent image background like your snapshot, because your desired backgroud image will cover both navigation and slideshow block on the template layout.

However, the idea is creating an image with the transparent color on the right/left and the same color with the site background color at center. Then you can define the transparent background image for both navigation and slidehow block with these css format:

#ja-slideshow {
background-image: url("image_path") no-repeat;
}

#ja-mainnav{
background-image: url("image_path") no-repeat;
}

[tulioc Friend tuliocJoin date: March 2013Posts: 59Downloads:0Uploads:19 Thanks: 18 Thanked: 1 times in 1 posts]

#513273

HI TomC,

Thanks for your reply.

Please check image attached.

Regards,

Tulio

---

Attachments:

1. 

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#513334

Hi Tulio,

Can you check out my suggestion above ?

[tulioc Friend tuliocJoin date: March 2013Posts: 59Downloads:0Uploads:19 Thanks: 18 Thanked: 1 times in 1 posts]

#513489

HI Leo, thanks for your reply.

Nothing happened:
#ja-slideshow {
background-image: url(“/images/navidad001.png”) no-repeat;
}

#ja-mainnav{
background-image: url(“image_path”) no-repeat;
}

Regards,

Tulio

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#513540

Hi Tulio,

Another solution in this case is creating two Custom HTML module containing your 2 jewelry images at user-1 and user-3 position, assign to all menu item pages and then clear JAT3 cache.

I will come back to take a look and give you the suitable override css tricks to make that jewelry images display like in your snapshot.

[Author]

Posts