repeat background image with no stretching

[wallaceturner]

I am using a textured background with a height of 400px and am using on a page which is 4000px. when i do

<Parallax bgImage="/images/texture.png" strength={5000} >
//content
</Parallax>

the background image does not repeat and it is stretched. Is there a way to repeat the image instead of stretching?

I note the implementation appears to use an <img> element so I do not know if this will be possible?

[rrutsche]

Yeah you are right. This won't work. You could use the renderLayer prop and implement your own transform:

<Parallax
            bgImage={'/path/to/another/image'}
            strength={400}
            renderLayer={percentage => (
                <div>use {percentage} to translate your background image here</div>
            )}
        >
            <p>... Content</p>
        </Parallax>

Or you can use the Background component

<Parallax strength={300}>
  <Background className="custom-bg">
    <div>element with background image</div>
  </Background>
</Parallax>

[wallaceturner]

I am trying your second approach. I have some content that is displaying correctly *prior to wrapping it in <Parallax>

<div className="background-parallex">
            //many move divs here
 </div>

.background-parallex {
    background-image:url('/images/texture2.png');    
}

this all works fine (but no parallex)

I then wrap my content in Parallex: this element is the root of the page effectively - it wraps ALL page content

<Parallax strength={300} >
                <Background className="custom-bg">
                    <div className="background-parallex">
                       //many move divs here
                    </div>
                </Background>
            </Parallax>

and the output is a blank (white) page!

I can see my content it is in the DOM but neither the Parallax background nor the content is visible

[rrutsche]

Can you just create a minimal example on codesandbox? Just fork from the link in the readme. Otherwise I cannot give you a good answer.

[wallaceturner]

Working (but no Parallex)

Not working

Basically one is wrapped in Parallex/Background and the other is not - the working example provided just to show the background image is working/referenced correctly.

When resolved I could create a PR for you to add to examples page if you wish

[wallaceturner]

hi @rrutsche are those examples suitable?

[rrutsche]

hi @wallaceturner, the example you posted is not configured properly: First of all you nested two <Background /> components. I did not try this before but I think this will not work. Also you added the backgroundImage styles twice - to the <Background /> and also to the underlying div. But the main thing that makes the example not working is the missing content inside the <Parallax />. Your "lorem ipsum" should not be inside of the <Background />. This one is positioned absolutely and will only get visible if there is some scrollable content. I forked and reconfigured your codesandbox snippet so you can get an idea of the usage: https://codesandbox.io/s/great-banzai-yo19h

Hope it helps.

[rrutsche]

I also added an example to my original sandbox snippet.

[wallaceturner]

hi @rrutsche thanks for that - re: my examples sorry about that I dont know what i was doing nesting the Background

The style attribute requires a height and width - this assumes you know the page height in advance or it seems you can just set it to a large number (say 10,000px) without affecting the actual page but allowing for future increases in actual page height

[rrutsche]

Yeah using fixed values is not the best solution, it was just an example. But you can always use e.g. viewport width/height.

In case of height this should probably be a value bigger than the height of your parallax section. So if the parallax covers the whole screen for example, you should use a value bigger than 100vh depending on the strength you use.

[rrutsche]

I think this can be closed right? Feel free to reopen the ticket if there is any issue related to this one.