Canvas Support

Parallax Question - Image for title

1 reply · opened Feb 6, 2022

LlloydjonesgFeb 6, 2022

Hi Canvas Support,

Hopefully this is a simple question for you guys: I would like to place a PNG title image into the 'parallax' feature, instead of the 'H2' text in your example files.

I have managed to place my title image inside the container and works as expected, moving relative to the scrolling on the page, and slowly fades out. This is great.

However, I can't seem to get the horizontal/vertical starting position correct whatver I try. Can you please help!

This is what I would like to see:

  • PNG title centered to the parallax section
  • Maximum width setting of 50% of the parallax width (i.e. browser window width)
  • Ability to adjust the relative hight inside the parallax. e.g. starting 100px from the top margain and moving down with the page scrolling.

The idea is that my title starts off high when you land on the page and 'sets' beneath the waves as you scroll down.
I've attached my live URL link so you can see what I have so far.

I've tried an number of different codes but nothing seems to work. Any help would be approeciated.

SSemicolon WebSTAFFFeb 9, 2022

Hello,

Thanks for your Kind Patience!

Consider using the following code:

<div class="vertical-middle">
	<div class="mx-auto">
		<div class="container clearfix">
			<div class="center" data-0="margin-top: 0; opacity: 1" data-450="margin-top: -400px; opacity: .4">
			<img src="images/FC_BgLogo.png" alt="FuCats">
			</div>
		</div>
	</div>
</div>

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard