[Resolved] Parallax melting with content

[Linus]

Hi,

I’m trying to create this effect: https://www.hemfrid.se/stadtjanster/flyttstadning/
Notice how the background “header” image “melts” with the content. What is a good way to achieve this?

This is my website: https://hemtips.se/diskmaskiner/
Imagine that the table and a background image blending together. That’s what I’m going for.

Let me know if you need more info!

Thank you 🙂

[Leo]

Hi there,

Not exactly sure which part you are referring to but does this help?
https://docs.generatepress.com/article/page-hero-examples/

Let me know 🙂

[Linus]

Hi,

Thanks for the reply and sorry for not being clear. Please take a look at the image following image
https://hemtips.se/wp-content/uploads/2018/10/example-image.jpg

This is the style I’m trying to achieve. I want part of a header image to be behind the product table 🙂

Any ideas or further questions? 🙂

[Leo]

Should be doable.

Can you set the header image first then I can give you some CSS?

[Linus]

Thanks!

I’ll update this reply with another URL that is a post and slightly different in a minute – if it’s not possible on this one.

https://hemtips.se/testa1/ (page – contained width)
https://hemtips.se/2018/10/05/draft/ (post – full width)

[Leo]

I don’t see a header on testa1.

But for draft, I assume you will will hide the entry header (title author etc)? then you try CSS like this:

@media (min-width: 769px) {
    .entry-content {
        margin-top: -200px;
    }
}

Is there a specific reason to use post instead of page? Just curious….

Let me know 🙂

[Linus]

Thank you, getting there! Is there a way to make sure it looks good on all devices? By using margin-top, the content box will move up. Not using px would maybe be optimal if there’s a solution, otherwise I’ll have to make a lot of @media designs.

No specific reason for post/page, just thought it might make it easier for us to find a solution 🙂

https://hemtips.se/testa1/

[Leo]

I guess you could try using % instead of px?

I find using % makes the height of the screen hard to deal with but you can definitely try.

[Linus]

Alright thanks, let me know if come across another solution please 🙂

[Leo]

Those are basically the only 2 common solutions.

You will have to test it out and view it on multiple device to see which one will suit you the best 🙂

Glad I could help!

[Author]

Posts