Public Forums 71,145 posts

[htmole Friend htmoleJoin date: June 2006Posts: 5Downloads:17Uploads:1]

#200161

One image better than thousand words, I am trying to set Purity for obtaining an effect like this:

http://www.joomfreak.com/demo/jf_calla-exteriors/

As you can see, I’d like to have an image (responsive) that fits top navbar and masthead position with an effect that “colorize” transparent background in the top navbar when you scroll dow the page.
Tried different solutions but with no good results, so I’m asking for an help: ideal solution would be different images fading in/out, but a single image could be good enough.
Any suggestion?

Thanks in advance for answers, sorry for my bad english.
Kindly regards.

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

#544187

Not certain I fully understand the effect you’re going for.

Can you, perhaps, explain with a bit more detail – perhaps a mock-up screenshot?

[htmole Friend htmoleJoin date: June 2006Posts: 5Downloads:17Uploads:1]

#544273

<em>@TomC 439096 wrote:</em><blockquote>Not certain I fully understand the effect you’re going for.

Can you, perhaps, explain with a bit more detail – perhaps a mock-up screenshot?</blockquote>

Thanks for your answer, Tom: if you take a look at the link I posted above you could understand what I mean.
My basical request is to have an image as background (instead of blue color) filling top of the page (see my screenshot).
Optionally, it would be great to have a certain number of sliding images (and not only one).

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#544376

@htmole,

Please try to open file: /templates/your_template_name/css/custom.css (if not exist, pls create new one) then add this rule:

.page-masthead .row-feature.row-feature-primary {
background: url("your_link_image");
}

Let me know if this helps

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

#544482

htmole:

Was the above suggestion helpful to you?

[htmole Friend htmoleJoin date: June 2006Posts: 5Downloads:17Uploads:1]

#544543

<em>@TomC 439470 wrote:</em><blockquote>htmole:

Was the above suggestion helpful to you?</blockquote>

Not completely, for two reasons: image shows correctly but is not responsive, and it doesn’t fit top navbar just masthead.
Anyway, thank you and Nazario for your kindness.

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#544613

@htmole,

I understand what you want. But I’m afraid, if you want to customise like this site, you need to customize CSS and JS yourself. This is heavy customization and is out of JA support scope.

[norchris Friend norchrisJoin date: December 2010Posts: 146Downloads:7Uploads:21 Thanks: 81 Thanked: 3 times in 1 posts]

#1028999

Hi, anyone found answer to this topic now. Very popular in 2017. I can do it in another common CMS but do not know how in Joomla…

Norchris

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#1029234

Hi Norchris,

This will require a bit heavy customization on style for both header block and the masthead section. The idea is that you will need to add the background image for masthead then style for header with transparent background so that it shows above the masthead. If you’re not familiar with code, I recommend you to hire a developer to get it done for you.

Regards

[Author]

Posts