Search code examples
javascriptcssreactjsgatsbygatsby-image

gatsby-background-image crop left side of background image on browser resize

I can create the result that I want using regular css on a div using the code below. The image is stuck to the right side of the screen and the left side of the image crops so that when you shrink the size of the screen you still see the castle in the image.

#bgImg{
  background-image: url("https://i.sstatic.net/pfepb.jpg");
  height: 225px;
  width: 100%;
  background-position: right center;
  object-fit: fill;
}
<div id='bgImg'><div>

I'm unable to create the same result using gatsby-background-image. The image always crops the right side of the image.

I tried creating a code sandbox, but unfortunately the image isn't appearing and I can't find out why

This is the code that I have which crops the right side of the image instead of the left

const bgImgProps: FluidObject = data.bessImg.childImageSharp.fluid
const otherImgProps: FluidObject = data.logoImg.childImageSharp.fluid

<BackgroundImage
        Tag="section"
        role="img"
        className='w-100 h-100'
        style={{
          backgroundPosition: "right center",
          objectFit: "fill"
        }}
        fluid={bessImgProps}
        backgroundColor={`#040e18`}
      >
         <div className='header-outer-container d-flex justify-content-center'> 
            <a className='only-gt-md' style={{height: "130px", width: "350px"}} href="/">
              <Img 
                className='w-100 h-100'
                fluid={logoImgProps}
                fadeIn={false}
                loading="eager"
                imgStyle={{objectFit: 'contain' }}
              ></Img>
            </a>
        </div>
      </BackgroundImage>
.header-outer-container{
    height: 225px;
}

header{
    min-height: 225px;
    background-position: right center;
}

This is what it looks like, but I want the image to crop from the other side, so that the castle remains visible, like in the plain css example above.

enter image description here

Solution

  • I had to give the class .headerBG to my background image and create css that looks like

    .headerBG::before{
    background-position: right center;
}

    I then didn't need any of the other lines which stated background-position: right center; resulting in JS and CSS which looked like

    const bgImgProps: FluidObject = data.bessImg.childImageSharp.fluid
const otherImgProps: FluidObject = data.logoImg.childImageSharp.fluid

<BackgroundImage
        Tag="section"
        role="img"
        className='w-100 h-100'
        style={{
          objectFit: "fill"
        }}
        fluid={bessImgProps}
        backgroundColor={`#040e18`}
      >
         <div className='header-outer-container d-flex justify-content-center'> 
            <a className='only-gt-md' style={{height: "130px", width: "350px"}} href="/">
              <Img 
                className='w-100 h-100'
                fluid={logoImgProps}
                fadeIn={false}
                loading="eager"
                imgStyle={{objectFit: 'contain' }}
              ></Img>
            </a>
        </div>
      </BackgroundImage>
    .header-outer-container{
    height: 225px;
}

header{
    min-height: 225px;
}

.headerBG::before{
    background-position: right center;
}