Duplicating web page with Parallax Effect

Hi there,

can you provide links to the two sites?

I've just sent the info through your pre-sales form.

Thanks, so those are fixed backgrounds. To do this with Sections you need to remove the parallax option and try adding a CSS Class to the section of fixed-background and adding this CSS:

.fixed-background {
    background-attachment: fixed;
}

Doing that causes all the sections to just scroll like it's all one webpage. i.e. no effect at all.

In the Sections > Settings tab there is a field for Custom Classes, you need to add the fixed-background classs there

That definitely makes it look the same during scroll. Is there a way I can apply a mask to the images? I used the exact same format, but do see they original site shows them cropped more narrowly. Can some sort of mask do this?

You can try this instead to position the images centrally:

.fixed-background {
    background-attachment: fixed;
    background-position: 50% 50%;
}

The old site also uses a height: 955px; property instead of the padding that you have set in the sections. I personally prefer padding then using a set height, but if you want you can add that to the above CSS and zero the padding in the section.

My problem is that with the images the way they are, the first text bar falls below the fold and so a viewer would have to be interested enough to scroll to see what the picture is about.

So I need to reduce their viewable size. I changed the code to include the "background-position: 50% 50%;" statement and couldn't see any impact on the pages.

So changed it to "background-size: 955px;" and that causes a tiled effect. The picture is shown 3 times across and has 2 rows.

For the first image only, I took out the padding and doing so causes that picture to disappear completely. Putting the padding back at 60%/10% causes it to show up again. You can check it out. Right now the first picture has no padding and doesn't show. but the other pictures still have padding and do show, albeit they are tiled as noted above.

So it would appear that I do need the padding to make the pictures show. I need to loose the tiling effect and somehow shrink them down.

Ok, what i meant was this CSS - which is what the old site uses:

.fixed-background {
    background-attachment: fixed;
    background-position: 50% 50%;
    height: 955px;
}

Then you can remove the Padding from the section.

Something I perhaps should have asked first, does the .fixed-background command break the responsive aspect? I just tried that aspect of things after this last change and it is broken. Desktop looks great. iPhone looks bad. So went backwards through the changes above until now I'm at the first code suggestion and the pictures still don't shrink down on the phone. How can I accomplish this and keep it responsive?

Yes, so as mobile doesn't support fixed backgrounds we can wrap the CSS in a media query like this:

@media (min-width: 769px) {
    .fixed-background {
        background-attachment: fixed;
        background-position: 50% 50%;
    }
}

I'm noticing on an iPad in landscape mode, the pictures go back to the fixed background mode and they are too big to look good. Would I just make the 769px number larger to force it out of background mode? Or is there a more elegant method? Some of these tablets have pretty high resolution screens.

You can try increasing to 1024px.

I had to go clear to 2048px! These things have amazing resolutions. (https://www.lifewire.com/what-is-ipads-screen-resolution-ips-display-1994325)

But I'm concerned this will impact laptops or even some peoples desktops. Is there any other way to identify if its a table to display properly for it?