White spaces on both sides of an image

[IkeCairns]

Problem

Like the picture below, I cannot get rid of the white spaces at the both sides of the image. I might be able to do it by using 'img' tag with 'background', but I would like to hang on using 'Image' tag by NextJS.

The code for this is as follows;

    <section className={css({
      position: 'relative',
      width: '100%',
      height: '80px',
      mb: '1rem',
      bg: 'green.50',
    })}>
      <div className={css({
        zIndex: 1,
        w: '100%',
        h: '100%',
        bg: 'green.50',
      })}>
        <Image
          src="/formTitleImage.png"
          alt="green background" 
          quality={100}
          fill
          className={css({
            objectFit: 'cover',
            bg: 'green.50',
            zIndex: 0
          })}
        />
      </div>
      <p className={css({
        zIndex: 1,
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: 'translate(-50%, -50%)',
        padding: '30px',
        color: 'white',
        textStyle: '2xl',
      })}>
        Contact Form
      </p>
    </section>

What I have tried

I put 'padding: 0' on the image tag and its parent tag, but it did not work.

Environment

NextJs: "14.0.3",
Panda-Css: "0.19.0",

[astahmer]

can you share a playground link with your case ? https://play.panda-css.com/

[IkeCairns]

Thank you for your message. My code on the shared playground is as follows;
https://play.panda-css.com/aSVYs2PJJZ

I also wrote a recipe for 'cssContainer' in another page as follows;

lib/css_container.cs

`import { cva } from "styled-system/css"

const cssContainer = cva({
base: {
border: '1px solid black',
margin: '3rem auto',
zIndex: -2,
padding: '2rem',
shadow: 'lg',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
},
variants: {
visual: {
basic: {backgroundColor: 'green.50'},
},
size: {
basic: {width: '1/2'}
}
}
})

export default cssContainer
`

[IkeCairns]

I also would like to share my code on github. This is because I could not find out how I can use NextJS environment on Panda playgrounds. I would be appreciated if you could try my repo with '$ npm run dev'.

https://github.com/IkeCairns/post_app_for_panda

If it is inconvenient for you to download my repo above, could you please make time to advise me how I can introduce NextJS environment on the playground? I just would like to use the tag 'Image' from NextJS there. Thank you for taking your time to read this comment.

[astahmer]

please try to make the example as minimal as possible, without next would be best 🙏
https://www.astahmer.dev/need-a-playground

if really needed (as in, the nextjs dependency HAS TO be part of the reproduction) then I'll look into your github repo whenever possible