gatsby-background-image обрезать левую часть фонового изображения при изменении размера браузера

Question

Я могу создать желаемый результат, используя обычный CSS для div, используя приведенный ниже код. Изображение приклеивается к правой стороне экрана, а левая сторона изображения обрезается, так что при уменьшении размера экрана вы все еще видите замок на изображении.

#bgImg{
  background-image: url("https://stackru.com/images/577551bdac884edceed075867534a74ab921e0a1.jpg");
  height: 225px;
  width: 100%;
  background-position: right center;
  object-fit: fill;
}

<div id='bgImg'><div>

Я не могу получить такой же результат, используя gatsby-background-image. Изображение всегда обрезает правую часть изображения.

Я попытался создать песочницу кода, но, к сожалению, изображение не появляется, и я не могу понять, почему

---

Это код, который у меня есть, который обрезает правую часть изображения, а не левую.

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;
}

Вот как это выглядит, но я хочу, чтобы изображение было обрезано с другой стороны, чтобы замок оставался видимым, как в приведенном выше примере простого css.

Answer 1

Я должен был дать класс .headerBG на мое фоновое изображение и создайте CSS, который выглядит как

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

Тогда мне не нужны были другие строки, в которых говорилось background-position: right center; в результате JS и CSS выглядели как

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;
}