question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Custom Background top is cut off

See original GitHub issue

I’ve been having an issue with the custom background element. I’ll try to explain the best I can.

It seems that when you set a custom background element the y coordinate position is off by -158px making the image appear to be cut off and pushed to the top of the frame.

translate3d(-50%, -158px, 0px) always seems to start at -158 at strength 300 no matter the size of the image, but I think it should start at 0px or something lesser than that.

I’ve included an image to show what I’m talking about https://s3.amazonaws.com/chrisdobler/Screen+Shot+2016-09-12+at+2.37.48+PM.png

I have it set up like this:


            <Parallax strength={300}>
              <Background>
                <img src="http://www.fillmurray.com/400/300"/>
              </Background>
              <Rectangle aspectRatio={[16, 6]}></Rectangle>
            </Parallax>

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
rrutschecommented, Oct 21, 2016

@chrisdobler @damienleroux I just published the new version. I hope it solves your issue.

0reactions
rrutschecommented, Oct 26, 2016

Super! If you find any other issue, let me know.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Wrapper background image gets cut off at the top
You can see that the top one is cut off. I've tried messing around with some of the div padding settings but can't...
Read more >
Desktop background picture cut-off, not full sized
So, it is back to Start button, type change desktop background, enter. Try out some other options within the Picture Position drop down....
Read more >
WordPress Background Images: How to Add, Edit ... - Kinsta
Adding a WordPress background image needn't be so challenging. Learn how to activate, edit, and customize them in this in-depth guide.
Read more >
Customize the desktop picture on your Mac - Apple Support
Modify the desktop picture's arrangement or dimensions: choose an option from the pop-up menu at the top of Wallpaper settings. Options include Fill...
Read more >
Fixed background cut off by header - Beaver Builder
A site I'm building for the company I work for has a fixed image and a fixed header and the image is getting...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found