如何正确添加经过“ gatsby图像”处理的图像作为列背景

Question

在我的GatbsyJS网站上，我正在使用插件“ gatsby-image”来处理图像。使用Bulma作为CSS框架，我创建了一个包含两列的布局，并且尝试使用经过“ gatsby-image”处理的图像作为第一列的背景。

我可以成功查询图像，使用它创建一个组件并将该组件放置在第一列中。但是，图像会拉伸以覆盖第二列。

这是组件代码：

import React from 'react'
import Img from 'gatsby-image'
import { StaticQuery, graphql } from 'gatsby'


const SidebarImage = () => (
    <StaticQuery
        query={imgQuery}
        render={data => (
            <Img
                fluid={data.SidebarImgEnt.childImageSharp.fluid}
                style={{
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                }}
            />
        )}
    />

  )

export default SidebarImage

export const imgQuery = graphql`
    query {
        SidebarImgEnt: file(relativePath: {eq: "sidebar.jpg"}) {
            childImageSharp {
                fluid(maxWidth: 1500) {
                    ...GatsbyImageSharpFluid
                }
            }
        }
    }
`

这是列的布局：

...
return (
<Layout>
    <div class="columns is-centered">
      <div class="column is-5">
          <SidebarImage />
        <section class="hero is-fullheight-with-navbar">
          <div class="hero-body">
              <div class="container">
                  <h1 class="title is-top">
                      {category}
                  </h1>
              </div>
          </div>
          <div class="hero-foot">

          </div>
        </section>    
      </div>

      <div class="column is-7 is-primary">
      ...
      </div>
  ...

因此，问题在于SidebarImage不在第一列之内，而是也覆盖了第二列。

有人发现错误了吗？

谢谢！