scrolling text banners over different images

[roly]

Hi Mike, after an hour of trial and error I have found a solution. I need to go out now but will post new template with new picture much later on this evening.

Ciao

Roly

[roly]

Hi Mike, attached is the new template. There are now 4 pictures, the first and 3rd I have not changed but I did change the 2nd one and added a 4th one. Let's start with the 2nd picture, I gave it the name test 2 parallax.jpg then then replaced the second picture with this one. Then I went to the small orange square over the second picture (top left) and edited the name line in the body placeholder to match the name of the new picture (see attached screen shot) hope it is not too small. I then brought in a new picture with the name Test 3 parallax 3.jpg Then I copied the small orange box above the second picture and pasted it on the top of the 4th picture and then changed the name in the edit with the name of the 4th picture. I then added the text below the 4th picture and then extended the page so that everything fit in. And voila......clean parallax. I presume you can add more pictures using the same method. Give it a shot and let us know if this meets your expectations.


I just looked at the screen grab picture and it is pretty small, so here is all the text in the head code box of the second picture;


<style>
.parallax {
background-attachment: fixed !important;
background-position: center center !important;
background-size: cover !important;
background-image: test2/parallax.jpg") !important;
}
</style>


Ciao

Roly

[roly]

Mike, I apologize but I was revisiting the template and I realized that I messed up the codes in the small boxes so the last picture is not parallax, but the second picture has been changed. I will play with this tomorrow and repost.

Sorry about that.

Ciao

Roly

[roly]

Hi Mike, I have cleaned up my act and changed the pictures, but all seems good. The one difference from my last instructions is, if you want to add a picture then copy the last picture and the little orange box at the same time, then paste in place and then move down. Then replace the picture by the one you want with the proper naming and then change the name in the place holder both at the top and in the file name. Look at the little orange box placeholder for examples.

Ciao

Roly

[michaelrenshaw]

Thanks roly, much appreciated.

Mike

[michaelrenshaw]

Well....
I mean thankyou mr roly you've exelled here. It works.
I would mention that rather than replacing the images on the sample site, which works, I started a new site with my own design and had to give the images a name which was htmlclass=parallax, and 1, 2, 3 etc for the different images for it to work.
Thanks you've done a great job considering parallax isn't your thing!

Cheers Mike

[roly]

Your very welcome Mike, glad it worked for you and thank you for the tip for the new site.

Ciao

Roly

[roly]

Well....
I mean thankyou mr roly you've exelled here. It works.
I would mention that rather than replacing the images on the sample site, which works, I started a new site with my own design and had to give the images a name which was htmlclass=parallax, and 1, 2, 3 etc for the different images for it to work.
Thanks you've done a great job considering parallax isn't your thing!


Cheers Mike

Hi Mike, I just looked at the picture and just saw the htmlclass=parallax, I guess that is why copying the picture ( which brought the name along) worked and why a new fresh picture did not work. I had not even thought of looking at the name.It now makes sense. If it is not a problem for you, I would like to see how you used it in your website. If this is a problem I'm ok with that.

Ciao

Roly

[michaelrenshaw]

I'mjust about to start the site but it may be a couple of weeks and I'll send a link.

Mike

[roly]

Thanks Mike, look forward to it.

Ciao

Roly