Not taking full height on mobile

[louishugens]

Hello,
The background image is not taking the full screen height on mobile. Testing it in chrome devtools and i am getting white space (page bg) at the bottom.

[timhagn]

Hi @loishugens,

could you please provide some code (a repo would be even better) your gatsby info and perhaps an image, so I'd be able to replicate your issue?

[louishugens]

Ok, thanks. This is the bottom of the image on laptop (big screen) [image: image.png] And this is on small screen in dev tools: [image: image.png] It has a transparent overlay over it. See below the code for the BackgroundImage component: const BackgroundSection = ({ className }) => ( <StaticQuery query={graphql` query { desktop: file(relativePath: { eq: "connexus1.jpg" }) { childImageSharp { fluid(quality: 90, maxWidth: 1160, duotone: { highlight: "#f00e2e", shadow: "#192550" }) { ...GatsbyImageSharpFluid_withWebp } } } } `} render={data => { // Set ImageData. const imageData = data.desktop.childImageSharp.fluid return ( <BackgroundImage Tag="section" className={className} fluid={imageData} backgroundColor={`#040e18`}

</BackgroundImage> ) } } /> ) const StyledBackgroundSection = styled(BackgroundSection)` width: 100%; height: 100vh; background-position: center right; background-repeat: no-repeat; background-size: cover; ` export default StyledBackgroundSection Thanks a lot. Best Regards Hugens LOUIS (+509)-47007622

…

On Sun, May 12, 2019 at 5:14 AM Tim Hagn ***@***.***> wrote: Hi @loishugens, could you please provide some code (a repo would be even better) your gatsby info and perhaps an image, so I'd be able to replicate your issue? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#31 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABEVNJMPLSXC6QQIT2RYHDTPU7NXXANCNFSM4HMJNWWQ> .

[timhagn]

As you commented by mail, neither one of your (local?) images is visible here on GitHub.
Also, please have a look at Creating and highlighting code blocks, so your code won't just be shown as plain text without any indentations : ).
I'd still need some info about your environment, so if you could provide the output of gatsby info run in your projects folder we could perhaps circle in on your issue, as I can't replicate it on my machine (quickly testing your styles and GraphQL query in gbitest).
And if you were willing to provide a repo I just could clone, that would be a treat ; ).

[louishugens]

Hi Tim, This is the gatsby info: $ gatsby info System: OS: Windows 10 CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz Binaries: npm: 6.9.0-next.0 - C:\Program Files\nodejs\npm.CMD Languages: Python: 3.6.5 - /c/Users/ME/AppData/Local/Programs/Python/Python36-32/python Browsers: Edge: 42.17134.1.0 npmPackages: gatsby: ^2.4.2 => 2.4.2 gatsby-background-image: ^0.5.5 => 0.5.5 gatsby-image: ^2.0.41 => 2.0.41 gatsby-plugin-intl: ^0.1.7 => 0.1.7 gatsby-plugin-manifest: ^2.1.1 => 2.1.1 gatsby-plugin-offline: ^2.1.0 => 2.1.0 gatsby-plugin-react-helmet: ^3.0.12 => 3.0.12 gatsby-plugin-sharp: ^2.0.36 => 2.0.36 gatsby-source-filesystem: ^2.0.33 => 2.0.33 gatsby-transformer-sharp: ^2.1.19 => 2.1.19 Best Regards Hugens LOUIS (+509)-47007622

…

On Sun, May 12, 2019 at 8:27 AM Tim Hagn ***@***.***> wrote: As you commented by mail, neither one of your (local?) images is visible here on GitHub. Also, please have a look at Creating and highlighting code blocks <https://help.github.com/en/articles/creating-and-highlighting-code-blocks>, so your code won't just be shown as plain text without any indentations : ). I'd still need some info about your environment, so if you could provide the output of gatsby info run in your projects folder we could perhaps circle in on your issue, as I can't replicate it on my machine (quickly testing your styles and GraphQL query in gbitest). And if you were willing to provide a repo I just could clone, that would be a treat ; ). — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#31 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABEVNJMUVBV4OFQO2BRWTGDPVAELTANCNFSM4HMJNWWQ> .

[timhagn]

gatsby-background-image had some issues in IE11 on Windows which mostly were rectified with v0.5.6 and I'm working on a complete transpilation to ES5. Might you please test it again with version 0.5.6?

[timhagn]

*hmmz* Just tested yout code on a Windows 10 VM with a nearly identical setup:

  System:
    OS: Windows 10
    CPU: (2) x64 Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz
  Binaries:
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0-next.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.16
  Browsers:
    Edge: 42.17134.1.0
  npmPackages:
    gatsby: 2.4.2 => 2.4.2
    gatsby-background-image: ^0.5.5 => 0.5.6
    gatsby-image: ^2.0.41 => 2.0.41
    gatsby-plugin-manifest: 2.1.1 => 2.1.1
    gatsby-plugin-offline: ^2.1.0 => 2.1.0
    gatsby-plugin-react-helmet: 3.0.12 => 3.0.12
    gatsby-plugin-sharp: 2.0.36 => 2.0.36
    gatsby-plugin-styled-components: ^3.0.7 => 3.0.7
    gatsby-source-filesystem: ^2.0.33 => 2.0.33
    gatsby-transformer-sharp: ^2.1.19 => 2.1.19

and it shows without any background color flashes - so no luck in replicating it. A repo with your sources really would be of help, as I don't have enough info right now to go from and be able to help...

[timhagn]

I just published v0.5.7 with sources transpiled and polyfilled where necessary through @babel/runtime-corejs3, perhaps you might try this one.

[timhagn]

@louishugens Have you tested it with newer versions since? Just published v0.6.2. Shouldn't you reply, I'm just gonna guess it's working and close this issue tomorrow.

[louishugens]

It’s ok Tim.

On Sun, May 19, 2019 at 4:23 PM Tim Hagn ***@***.***> wrote: @louishugens <https://github.com/louishugens> Have you tested it with newer versions since? Just published v0.6.2. Shouldn't you reply, I'm just gonna guess it's working and close this issue tomorrow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#31?email_source=notifications&email_token=ABEVNJK3TOIC3XZJAIODJBTPWGZKTA5CNFSM4HMJNWW2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVXJ3FI#issuecomment-493788565>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABEVNJNG6VZ6JSKNDS2H7FDPWGZKTANCNFSM4HMJNWWQ> .

-- Best Regards Hugens LOUIS (+509)-47007622

[timhagn]

Perfect, than I'm gonna close this : ).