Adding a 'gatsby-image' processed image as a background for one column only isn't working as expected

[julsmon]

Description

Hi everyone, after learning how to use the plugin 'gatsby-image' for background images, I'm trying to use a 'gatsby-image' processed image as a background for one column. The layout has two columns next to each other, only the first column should have a fluid image as a background, but the image somehow stretches to cover also the second column.

Steps to reproduce

This is my component code:

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

and this is the layout code:

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>

`

Expected result

The expected result would be to have the fluid image covering the background of the first column only, adjusting itself to the different width and height that the column reaches on different screens.

Actual result

The actual result is that the image stretches to cover the second column as well, even if the image component is only placed inside the first column.

Environment

This is my environment;

npmPackages:
gatsby: ^2.0.52 => 2.0.52
gatsby-image: ^2.0.20 => 2.0.20
gatsby-plugin-categories: ^1.2.0 => 1.2.0
gatsby-plugin-manifest: ^2.0.9 => 2.0.9
gatsby-plugin-offline: ^2.0.15 => 2.0.15
gatsby-plugin-react-helmet: ^3.0.2 => 3.0.2
gatsby-plugin-sass: ^2.0.4 => 2.0.4
gatsby-plugin-sharp: ^2.0.12 => 2.0.12
gatsby-plugin-styled-components: ^3.0.2 => 3.0.2
gatsby-source-filesystem: ^2.0.8 => 2.0.8
gatsby-transformer-remark: ^2.1.12 => 2.1.12
gatsby-transformer-sharp: ^2.1.8 => 2.1.8

Thank you very much.

[LekoArts]

Can you share your repository or the CSS styles you're using?

[julsmon]

Hi @LekoArts, I'm using Bulma CSS framework as it is grid-wise or column-wise (I didn't make any custom grid). So my current css file just lists the import from Bulma, like so:

@import "./node_modules/bulma/sass/grid/columns.sass";

[LekoArts]

Mh, it's difficult to help you without having a reproduction repository. So this is just a shot in the dark:

Add overflow: hidden; to your <div class="column is-5"> column.

[julsmon]

Adding overflow doesn't seem to work.
You can find the repository at [https://gitlab.com/giuliacta/intelness] and you can see what's happening with the image in any category page.
Many thanks for your support!

[gurpreet-hanjra]

Hello Julsmon, is it a public repo, would you mind if I have a look on the issue? For some reason, I'm not a able to view the repo.

[sidharthachatterjee]

@julsmon https://gitlab.com/giuliacta/intelness appears to be private

Can you please add me or link to a public minimal reproduction repo?

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[gatsbot]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.

Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.

Thanks again for being part of the Gatsby community!