Unable to load fullscreen background image

[arjunrao87]

Description

Unable to have fullscreen background image on gatsby page

Steps to reproduce

I tried replicating the scenario in the gatsby-image tutorial - https://github.com/gatsbyjs/gatsby/tree/master/examples/using-gatsby-image but was unsuccessful in getting it to work.

I have the sample repo here - https://github.com/arjunrao87/gatsby-fullscreen-background-image

Specific parts of it are :

• layouts/index.js

  <div
  css={{
    maxWidth: 640,
    margin: `0 auto`,
    padding: `${rhythm(1)} ${rhythm(3 / 4)}`,
  }}
  >
  {children}
  </div>

• pages/index.js

  
  import React from "react"
  import { graphql } from "gatsby"
  import Img from "gatsby-image"
  import Layout from "../layouts"

class IndexComponent extends React.Component { render() { return (

)

} }

export default IndexComponent

export const query = graphql query FrontPageQuery { file(relativePath: { regex: "/camera/" }) { childImageSharp { fluid(maxWidth: 1500, rotate: 180) { ...GatsbyImageSharpFluid } } } }

where I also have a file in images/camera.jpg. 

The graphql query at the end of the pages/index.js works perfectly fine in the graphiql interface and returns me the expected data but for somereason the Img tag fails to render the image in the browser at runtime.

What should happen?

Page should load with a fullscreen background image

What happened.

Blank page loaded. No errors observed  in the server/browser console

### Environment

  System:
    OS: macOS Sierra 10.12.4
    CPU: x64 Intel(R) Core(TM) M-5Y31 CPU @ 0.90GHz
    Shell: 5.2 - /bin/zsh
  Binaries:
    Node: 10.5.0 - /usr/local/bin/node
    Yarn: 1.2.1 - /usr/local/bin/yarn
    npm: 6.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 67.0.3396.99
    Safari: 10.1
  npmPackages:
    gatsby: next => 2.0.0-beta.17
    gatsby-image: next => 2.0.0-beta.4
    gatsby-plugin-glamor: next => 2.0.0-beta.2
    gatsby-plugin-netlify: next => 2.0.0-beta.2
    gatsby-plugin-react-helmet: ^2.0.8 => 2.0.11
    gatsby-plugin-sass: 1.0.19 => 1.0.19
    gatsby-plugin-sharp: next => 2.0.0-beta.2
    gatsby-plugin-typography: next => 2.2.0-beta.2
    gatsby-source-filesystem: next => 2.0.1-beta.3
    gatsby-transformer-sharp: next => 2.1.1-beta.3
  npmGlobalPackages:
    gatsby-cli: 1.1.58

### File contents (if changed)

`gatsby-config.js`: 

module.exports = { siteMetadata: { title: 'Documentary Hunt', }, plugins: [ 'gatsby-transformer-sharp', 'gatsby-plugin-sharp', 'gatsby-plugin-sass', { resolve: gatsby-plugin-typography, options: { pathToConfigModule: ./src/utils/typography.js, }, }, { resolve: gatsby-source-filesystem, options: { name: src, path: ${__dirname}/src/, }, }, ], };

`package.json`: 

{ "name": "gatsby-fullscreen-background-image", "description": "Gatsby Fullscreen Background Image", "version": "0.1.0", "author": "Arjun Rao", "dependencies": { "bloomer": "^0.6.3", "bulma": "^0.6.2", "gatsby-plugin-react-helmet": "^2.0.8", "gatsby-plugin-sass": "1.0.19", "react-helmet": "next", "styled-components": "^3.3.3", "typography-plugin-code": "^0.16.11", "typography-react": "^0.10.4", "typography-theme-lincoln": "^0.15.11", "gatsby": "next", "gatsby-image": "next", "gatsby-plugin-glamor": "next", "gatsby-plugin-netlify": "next", "gatsby-plugin-sharp": "next", "gatsby-plugin-typography": "next", "gatsby-source-filesystem": "next", "gatsby-transformer-sharp": "next", "glamor": "^2.20.40", "numeral": "^2.0.6", "react": "^16.3.2", "react-dom": "^16.3.2", "react-typography": "^0.16.13", "typeface-oswald": "0.0.54", "typeface-pt-sans": "0.0.54", "typography": "^0.16.6", "typography-theme-elk-glen": "^0.16.9" }, "keywords": [ "gatsby" ], "scripts": { "build": "gatsby build", "dev": "gatsby develop -o", "format": "prettier --write 'src/*/.js'", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "prettier": "^1.11.1" } }

`gatsby-node.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->
`gatsby-browser.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->
`gatsby-ssr.js`: N/A <!-- Please use a code block or just leave it as is if wasn't changed -->

[joshdcuneo]

Hey,

I haven't looked at the tutorial but I cloned your repo and got it working. You can have a look at the changes I made here https://github.com/joshdcuneo/full-viewport-image.

You were pretty close, just using the wrong prop to pass the style object in a couple of places.

I find it much easier to do styling with CSS modules or perhaps styled-components/emotion rather than the inline react styles. You can use the standard CSS syntax and reference it here that way.

I gave a couple of suggestions of ways to get the image to cover the full screen in the repo.

Let me know how you go!

[arjunrao87]

Worked like a charm! Thanks for helping out!