i want my sticky photo to .... (but I can't)

I have a photo about a screen height down from the top of page
it scrolls as they normally do
I can make it stick at the top
* but I cannot make the subsequent texts and photos slide in front of it
ie i can not force the photo to be in a back layer
*in fact the 'sticky notes' say it will be in top layer when using sticky
the desired effect I see all over the net
https://pacificliberty.com/ (this photo never moves -- is that easier?)
but I can not do it
how??

similarly, I often see
a photo with text over scroll over it
then a fresh photo appears
https://conduit.group/
how/

Both sites are using 'Parallax' scrolling which can be found in the Web Animation options.

The Conduit site will be harder to replicate because it has more tricks, but the effect is still Parallax Scrolling.

i did get parallex scolling to work a little now
www.ravenswood.co
but still can not get the top photo to stay in BACK of the other items as they slide uo
guess I will keep playing
thanks

Try placing your photo on the Pasteboard layer with the Fill Browser option.

Attachment 125847

The photo will stay fixed and everything will scroll over the top of it. Similar example at https://theparsonage.co.uk where the photo is used as a watermark. You can have the pasteboard scroll too.

was actually thinking of this
without the filled browser
will experiment
thanks!

Photo set to Stretch Full Width with Parallax scrolling and Sent To Back, add text as normal.

Hi TheeeDragon,

When the parallax feature first came out in Xara, I experimented with every possible combination of settings I could think of to get the effect you're looking for. I had the same problem as you… nothing worked.

Only a couple of days ago, I was looking at a demo website that Xara put out to show its potential, and lo and behold, it did exactly that. I opened up the coding and figured out how they did it (I think :D ). It is not something that you can do directly with the software, so it requires a workaround. I’ve only had the opportunity to experiment with it a little, but it seems to work! Here’s what you can try:

1 Put your images on the page where you want them to appear (probably using the stretch to full width option). That is to say, if you want it to show up after a particular text, place it after that text. Don't put the text over the image (unless you want it to appear that way), just in the areas above and below. You can do this with multiple images.

2 Use the naming option (UTILITIES > NAMES) and in the Apply Name box, type htmlclass="parallax" (or use a different name than parallax if you prefer) and click Add. For any subsequent images, you can choose the same name from the dropdown under Apply Name.

3 Once that’s done, go to UTILITIES > WEB PROPERTIES > WEBSITE and click the HTML Code (head) button. Enter the following coding:
<style>
.parallax {
background-attachment: fixed !important;
background-position: top center !important;
background-size: cover !important;
}
</style>
(If you used a different name, put it in place of parallax)
Click OK and OK.

Now you can preview the page.

This worked perfectly for me and gave me the result you want.

Please let me know if it works!

I followed your instruction and it works as you'd expect, very nice. However when I publish it to my server it just scrolls normally.

ON THE WEB

Hi Egg.

As I said, I haven’t had the chance to check it completely. I notice that your page has strange functioning even when I open it in Chrome from the preview window. Mine works. I´m going to see if I can figure out what’s going on.

At the very least, hopefully we’re on the track to being able to create this effect.

Quote:

---

your page has strange functioning

---

I 'm lost, what's this?