Background addon not working

I have applied background addon to my storybook, it is showing those colors as option for selecting as background but on selecting it is not getting applied to my storybook. My config.js looks like this

import { configure, addDecorator, addParameters } from '@storybook/react';
import BItheme from './theme';
import styles from "@sambego/storybook-styles";

addParameters({
  options: {
    theme: BItheme,
  },
  backgrounds: [
    { name: 'twitter', value: '#00aced'},
    { name: 'facebook', value: '#3b5998' },
  ],
});

addDecorator(styles({
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: 500,
}))

// automatically import all files ending in *.stories.js and tsx
configure(
  [
    require.context('../stories', true, /\.stories\.js$/),
    require.context('../src/components', true, /\.stories\.tsx$/)
  ],
  module
);

[winterlamon]

I was also having this issue because we import styles (which includes Bootstrap). BS sets background-color on body to white by default. To get around it, I added a stylesheet to Storybook in the .storybook directory (not with our main styles) and imported it into .storybook/config.js.

// .storybook/storybook.scss

.sb-show-main {
  background-color: transparent;
}

// .storybook/config.js

import './storybook.scss'

[from-nibly]

I am also seeing this issue. The problem seems to come from the fact that the body in the iframe has a background-color set to #fff If I remove that css value in developer tools the background addon starts working.