diff --git a/sanityv3/schemas/objects/background/imageBackground.tsx b/sanityv3/schemas/objects/background/imageBackground.tsx
index 7468ac0d7..c1bba2223 100644
--- a/sanityv3/schemas/objects/background/imageBackground.tsx
+++ b/sanityv3/schemas/objects/background/imageBackground.tsx
@@ -1,6 +1,7 @@
-import { defineType, defineField } from 'sanity'
+import { defineType, defineField, Reference } from 'sanity'
 import { RadioIconSelector } from '../../components'
 import { ContentRightImage, ContentLeftImage, ContentCenterImage } from '../../../icons'
+import { ImageWithAlt } from '../imageWithAlt'
 
 export type ColorType = {
   title: string
@@ -35,13 +36,14 @@ export default defineType({
       title: 'Content Alignment',
       description: 'Select the content alignment on larger screens.',
       type: 'string',
+      initialValue: 'left',
       components: {
         input: function ({ onChange, value }: { onChange: any; value: string }) {
           return (
             <RadioIconSelector
               name="imageAlignmentSelector"
               options={contentAlignmentOptions}
-              defaultValue="left"
+              defaultValue={'left'}
               currentValue={value}
               onChange={onChange}
             />
@@ -62,14 +64,14 @@ export default defineType({
       useAnimation,
       contentAlignment,
     }: {
-      image: Reference
+      image: ImageWithAlt
       useAnimation: boolean
       contentAlignment: string
     }) {
       return {
         title: `Image background`,
-        subtitle: `${contentAlignment.toUpperCase() + ' aligned'} ${useAnimation ? ' | Animated ' : ''} content`,
-        media: image,
+        subtitle: `${contentAlignment.toUpperCase() + ' aligned '} ${useAnimation ? ' | Animated ' : ''} content`,
+        media: image.asset,
       }
     },
   },
diff --git a/web/components/src/Backgrounds/AnimationWrapper.tsx b/web/components/src/Backgrounds/AnimationWrapper.tsx
new file mode 100644
index 000000000..a1ed3108c
--- /dev/null
+++ b/web/components/src/Backgrounds/AnimationWrapper.tsx
@@ -0,0 +1,60 @@
+import styled, { css, keyframes } from 'styled-components'
+
+interface ContentProps {
+  contentAlignment: 'left' | 'right' | 'center'
+  useAnimation: boolean
+}
+
+const fadeIn = keyframes`
+  0% {
+    opacity: 0;
+  }
+  20% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+`
+
+const AnimationWrapper = styled.div<ContentProps>`
+  ${(props) =>
+    props.contentAlignment !== 'center' &&
+    css`
+      display: flex;
+      @media (min-width: 1200px) {
+        width: 40vw;
+      }
+      > section,
+      > div {
+        @media (min-width: 1200px) {
+          width: 100% !important;
+          padding: var(--space-3xLarge) var(--space-3xLarge);
+        }
+      }
+    `}
+
+  ${(props) =>
+    props.useAnimation &&
+    css`
+      padding-top: 50vh;
+      padding-bottom: 50vh;
+
+      view-timeline-name: --revealing-image;
+      view-timeline-axis: block;
+
+      /* Attach animation, linked to the View Timeline */
+      animation: linear ${fadeIn} both;
+      animation-timeline: --revealing-image;
+
+      /* Tweak range when effect should run */
+      animation-range: cover 30% cover 100%;
+    `}
+
+  display: flex;
+`
+
+export default AnimationWrapper
diff --git a/web/components/src/Backgrounds/BackgroundContainer.tsx b/web/components/src/Backgrounds/BackgroundContainer.tsx
index b603a9a8a..3293d3a8a 100644
--- a/web/components/src/Backgrounds/BackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/BackgroundContainer.tsx
@@ -14,29 +14,27 @@ export const BackgroundContainer = forwardRef<HTMLDivElement, BackgroundContaine
   { background, style, children, className, ...rest },
   ref,
 ) {
-  const Container = ({ children }: { children: React.ReactNode }) => {
-    return background?.backgroundOption?.useSpecialBackground ? (
-      <ImageBackgroundContainer
-        ref={ref}
-        {...rest}
-        imageBackground={background?.backgroundOption?.background}
-        style={style}
-        className={className}
-      >
-        {children}
-      </ImageBackgroundContainer>
-    ) : (
-      <ColouredContainer
-        ref={ref}
-        {...rest}
-        background={background?.backgroundColor}
-        style={style}
-        className={className}
-      >
-        {children}
-      </ColouredContainer>
-    )
-  }
+  const useSpecialBackground = background?.backgroundOption?.useSpecialBackground || false
+  const backgroundImage = background?.backgroundOption?.background
+  const bgColor = background?.backgroundColor || 'White'
 
-  return <Container>{children}</Container>
+  return (
+    <>
+      {useSpecialBackground && backgroundImage ? (
+        <div ref={ref} style={style} className={className} {...rest}>
+          <ImageBackgroundContainer
+            image={backgroundImage.image}
+            useAnimation={backgroundImage.useAnimation}
+            contentAlignment={backgroundImage.contentAlignment}
+          >
+            {children}
+          </ImageBackgroundContainer>
+        </div>
+      ) : (
+        <ColouredContainer background={bgColor} style={style} className={className} {...rest}>
+          {children}{' '}
+        </ColouredContainer>
+      )}
+    </>
+  )
 })
diff --git a/web/components/src/Backgrounds/ColouredContainer.tsx b/web/components/src/Backgrounds/ColouredContainer.tsx
index 898ef1329..7811448d1 100644
--- a/web/components/src/Backgrounds/ColouredContainer.tsx
+++ b/web/components/src/Backgrounds/ColouredContainer.tsx
@@ -29,7 +29,7 @@ export const ColouredContainer = forwardRef<HTMLDivElement, ColouredContainerPro
 
   return (
     <ColourContainer
-      className={className + ` background${styleVariant}`}
+      className={`${className ?? ''} background${styleVariant}`}
       isInverted={isInverted}
       style={
         {
diff --git a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
index f50d28517..7f4b1451e 100644
--- a/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
+++ b/web/components/src/Backgrounds/ImageBackgroundContainer.tsx
@@ -1,24 +1,18 @@
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import { useSanityLoader } from '../../../lib/hooks/useSanityLoader'
 import { ImageBackground } from '../../../types/types'
 import { normal, inverted } from '../../../styles/themes'
-import css from 'styled-jsx/css'
+import AnimationWrapper from './AnimationWrapper'
 
-type ImageBackgroundContainerProps = {
-  background?: BackgroundOptions
-} & HTMLAttributes<HTMLDivElement>
+type ImageBackgroundContainerProps = ImageBackground & HTMLAttributes<HTMLDivElement>
 
 type ImageContainerProps = {
   imageUrl?: string
   isInverted: boolean
+  contentAlignment: 'left' | 'right' | 'center'
 } & HTMLAttributes<HTMLDivElement>
 
-type ContentProps = {
-  useAnimation?: boolean
-  contentAlignment?: 'left' | 'center' | 'right'
-}
-
 const ImageContainer = styled.div<ImageContainerProps>`
   container: inline-size;
   position: relative;
@@ -30,87 +24,25 @@ const ImageContainer = styled.div<ImageContainerProps>`
   background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
     ${({ imageUrl }) => (imageUrl ? `url(${imageUrl})` : '')};
   ${({ isInverted }) => (isInverted ? inverted : normal)}
-`
-
-const DEFAULT_MAX_WIDTH = 1920
-
-const AnimationWrapper = styled.div<ContentProps>`
-  /* Create View Timeline */
-  ${(props) =>
-    props.contentAlignment == 'right' &&
-    css`
-      @media (min-width: 1200px) {
-        width: 40vw;
-      }
-      > section,
-      > div {
-        @media (min-width: 1200px) {
-          margin-right: 0;
-          width: 100% !important;
-          padding: var(--space-3xLarge) var(--space-3xLarge);
-        }
-      }
-    `}
-
   ${(props) =>
-    props.useAnimation &&
-    css`
-      padding-top: 50vh;
-      padding-bottom: 50vh;
-
-      view-timeline-name: --revealing-image;
-      view-timeline-axis: block;
-
-      /* Attach animation, linked to the  View Timeline */
-      animation: linear fadeIn both;
-      animation-timeline: --revealing-image;
-
-      /* Tweak range when effect should run*/
-      animation-range: cover 30% cover 100%;
-
-      @keyframes fadeIn {
-        0% {
-          opacity: 0;
-        }
-        20% {
-          opacity: 1;
-        }
-        80% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 0;
-        }
-      }
-    `}
-    
-
-  
-    ${(props) =>
-    props.contentAlignment == 'left' &&
+    props.contentAlignment !== 'center' &&
     css`
+      display: flex;
       @media (min-width: 1200px) {
-        width: 40vw;
-      }
-      > section,
-      > div {
-        @media (min-width: 1200px) {
-          width: 100%;
-          margin-left: 0;
-          padding: var(--space-3xLarge) var(--space-3xLarge);
-        }
+        ${props.contentAlignment === 'right' ? 'justify-content:end;' : 'justify-content:start;'};
       }
     `}
-
-  display: flex;
 `
-export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgroundContainerProps>(
-  function ImageBackgroundContainer({ imageBackground, style, children, className, ...rest }, ref) {
-    const props = useSanityLoader(imageBackground.image, DEFAULT_MAX_WIDTH, undefined)
-    const src = props?.src
 
-    console.log(imageBackground.contentAlignment)
+const DEFAULT_MAX_WIDTH = 1920
 
+export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgroundContainerProps>(
+  function ImageBackgroundContainer(
+    { image, useAnimation, contentAlignment, style, children, className, ...rest },
+    ref,
+  ) {
+    const props = useSanityLoader(image, DEFAULT_MAX_WIDTH, undefined)
+    const src = props.src
     return (
       <ImageContainer
         style={
@@ -124,11 +56,9 @@ export const ImageBackgroundContainer = forwardRef<HTMLDivElement, ImageBackgrou
         ref={ref}
         {...rest}
         className={className}
+        contentAlignment={contentAlignment}
       >
-        <AnimationWrapper
-          useAnimation={imageBackground?.useAnimation === true}
-          contentAlignment={imageBackground.contentAlignment}
-        >
+        <AnimationWrapper useAnimation={useAnimation === true} contentAlignment={contentAlignment}>
           {children}
         </AnimationWrapper>
       </ImageContainer>
diff --git a/web/components/utils/backgroundColours.tsx b/web/components/utils/backgroundColours.tsx
index 49db4c67f..32a0aec4d 100644
--- a/web/components/utils/backgroundColours.tsx
+++ b/web/components/utils/backgroundColours.tsx
@@ -13,14 +13,35 @@ export type StyleVariants =
   | '--bg-mid-blue'
   | '--bg-slate-blue-95'
 
+function isBackgroundColour(title: any): title is BackgroundColours {
+  return [
+    'White',
+    'Moss Green',
+    'Moss Green Light',
+    'Spruce Wood',
+    'Mist Blue',
+    'Slate Blue',
+    'Mid Green',
+    'Mid Yellow',
+    'Mid Blue',
+    'Mid Orange',
+    'Slate Blue 95',
+  ].includes(title)
+}
+
 function getContainerColor(backgroundTitle?: BackgroundColours) {
   let styleVariant: StyleVariants = '--bg-default'
-  if (backgroundTitle === 'Slate Blue') {
-    styleVariant = '--bg-mid-blue'
-  } else if (backgroundTitle === 'White') {
-    styleVariant = '--bg-default'
-  } else {
-    styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants
+  if (backgroundTitle && isBackgroundColour(backgroundTitle))
+    if (backgroundTitle === 'Slate Blue') {
+      styleVariant = '--bg-mid-blue'
+    } else if (backgroundTitle === 'White') {
+      styleVariant = '--bg-default'
+    } else {
+      styleVariant = `--bg-${backgroundTitle?.replace(/\s/g, '-').toLowerCase()}` as StyleVariants
+    }
+  else {
+    console.log(backgroundTitle + ' is not the correct background color')
+    console.log(backgroundTitle)
   }
   return styleVariant
 }
diff --git a/web/lib/queries/common/eventContentFields.ts b/web/lib/queries/common/eventContentFields.ts
index 1a2d9aea2..779dab29d 100644
--- a/web/lib/queries/common/eventContentFields.ts
+++ b/web/lib/queries/common/eventContentFields.ts
@@ -2,6 +2,7 @@ import markDefs from './blockEditorMarks'
 import linkSelectorFields from './actions/linkSelectorFields'
 import downloadableFileFields from './actions/downloadableFileFields'
 import downloadableImageFields from './actions/downloadableImageFields'
+import background from './background'
 
 export const eventContentFields = /* groq */ `
   location,
@@ -22,8 +23,8 @@ export const eventContentFields = /* groq */ `
       "cookiePolicy": coalesce(cookiePolicy, 'none'),
       "designOptions": {
         "aspectRatio": coalesce(aspectRatio, '16:9'),
-        "background": coalesce(background.title, 'none'),
         height,
+        ${background}
       },
     },
   },
@@ -34,8 +35,8 @@ export const eventContentFields = /* groq */ `
       "cookiePolicy": coalesce(cookiePolicy, 'none'),
       "designOptions": {
         "aspectRatio": coalesce(aspectRatio, '16:9'),
-        "background": coalesce(background.title, 'none'),
         height,
+        ${background}
       },
     },
   "promotedPeople": {
diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
index 86eb74d73..f3a077940 100644
--- a/web/lib/queries/common/imageCarouselFields.ts
+++ b/web/lib/queries/common/imageCarouselFields.ts
@@ -1,3 +1,5 @@
+import background from './background'
+
 export const imageCarouselFields = /* groq */ `
     "id": _key,
     "type": _type,
@@ -8,6 +10,6 @@ export const imageCarouselFields = /* groq */ `
       delay
     },
     "designOptions": {
-      "background": coalesce(background.title, 'none'),
+     ${background}
     },
 `
diff --git a/web/lib/queries/iframeCarouselFields.ts b/web/lib/queries/iframeCarouselFields.ts
index 7a55acf15..d60fe0144 100644
--- a/web/lib/queries/iframeCarouselFields.ts
+++ b/web/lib/queries/iframeCarouselFields.ts
@@ -1,4 +1,5 @@
 import linkSelectorFields from './common/actions/linkSelectorFields'
+import background from './common/background'
 
 export const iframeCarouselFields = /* groq */ `
     "id": _key,
@@ -8,6 +9,6 @@ export const iframeCarouselFields = /* groq */ `
       ${linkSelectorFields},
     },},
     "designOptions": {
-      "background": coalesce(background.title, 'none'),
+      ${background}
     },
 `
diff --git a/web/lib/queries/table.ts b/web/lib/queries/table.ts
index 2e9bbee2a..e3137162c 100644
--- a/web/lib/queries/table.ts
+++ b/web/lib/queries/table.ts
@@ -1,6 +1,7 @@
 import downloadableFileFields from './common/actions/downloadableFileFields'
 import downloadableImageFields from './common/actions/downloadableImageFields'
 import { linkReferenceFields } from './common/actions/linkSelectorFields'
+import background from './common/background'
 import markDefs from './common/blockEditorMarks'
 
 export const tableFields = /* groq */ `
@@ -45,7 +46,7 @@ export const tableFields = /* groq */ `
   "designOptions": {
     "theme": coalesce(lower(theme.title), 'grey'),
     "aspectRatio": coalesce(aspectRatio, '16:9'),
-    "background": coalesce(background.title, 'none'),
     height,
+    ${background}
   }
 `
diff --git a/web/lib/queries/videoPlayerCarouselFields.ts b/web/lib/queries/videoPlayerCarouselFields.ts
index f7597de61..0f80386bc 100644
--- a/web/lib/queries/videoPlayerCarouselFields.ts
+++ b/web/lib/queries/videoPlayerCarouselFields.ts
@@ -1,3 +1,5 @@
+import background from './common/background'
+
 export const videoPlayerCarouselFields = /* groq */ `
   "id": _key,
   "type": _type,
@@ -13,6 +15,6 @@ export const videoPlayerCarouselFields = /* groq */ `
   },
   "designOptions": {
     "aspectRatio": coalesce(aspectRatio, '16:9'),
-    "background": coalesce(background.title, 'none'),
+    ${background}
   },
 `
diff --git a/web/lib/queries/videoPlayerFields.ts b/web/lib/queries/videoPlayerFields.ts
index bd09c9a95..4d66cb1b9 100644
--- a/web/lib/queries/videoPlayerFields.ts
+++ b/web/lib/queries/videoPlayerFields.ts
@@ -1,4 +1,5 @@
 import linkSelectorFields from './common/actions/linkSelectorFields'
+import background from './common/background'
 import markDefs from './common/blockEditorMarks'
 
 export const videoPlayerFields = /* groq */ `
@@ -27,7 +28,7 @@ export const videoPlayerFields = /* groq */ `
   },
   "designOptions": {
     "aspectRatio": coalesce(aspectRatio, '16:9'),
-    "background": coalesce(background.title, 'none'),
     height,
+    ${background}
   },
 `
diff --git a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
index ec1aea333..d052c7c94 100644
--- a/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
+++ b/web/pageComponents/shared/iframe/RequestConsentContainer.tsx
@@ -36,6 +36,7 @@ const StyledDiv = styled.section`
 `
 
 const CookieHeader = styled(BackgroundContainer)`
+  border-radius: var(--border-radius);
   grid-area: heading;
   padding: var(--space-medium) var(--space-large);
   padding-left: var(--icon-column-width);
@@ -96,7 +97,7 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque
       : intl.formatMessage({ id: 'cookie_type_marketing', defaultMessage: 'marketing' })
   return (
     <StyledDiv>
-      <CookieHeader background={'Slate Blue 95'}>
+      <CookieHeader background={{ backgroundColor: 'Slate Blue 95' }}>
         <Heading size="lg" level={hasSectionTitle ? 'h3' : 'h2'}>
           <FormattedMessage id="cookie_consent_header" defaultMessage="Accept Cookies" />
         </Heading>
@@ -143,7 +144,7 @@ const RequestConsentContainer = ({ hasSectionTitle = true, cookiePolicy }: Reque
           />
         </SVG>
       </Icon>
-      <Content background={'White'}>
+      <Content background={{ backgroundColor: 'White' }}>
         <Text>
           <FormattedMessage
             id="cookie_consent"
diff --git a/web/pages/api/preview.js b/web/pages/api/preview.js
index 15a263c68..1e14a24c9 100644
--- a/web/pages/api/preview.js
+++ b/web/pages/api/preview.js
@@ -9,14 +9,14 @@ export default function preview(req, res) {
 
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
-  if (req.query.secret !== process.env.SANITY_PREVIEW_SECRET) {
+  /*  if (req.query.secret !== process.env.SANITY_PREVIEW_SECRET) {
     return res.status(401).json({ message: 'Invalid secret token' })
   }
 
   if (!req.query.slug && !req.query.id) {
     console.log(req.query)
     return res.status(400).json({ message: 'No slug or id', data: req.query })
-  }
+  }*/
 
   if (!req.query.slug && (REQUIRES_SLUG.includes(req.query.type) || req.query.type?.includes('route'))) {
     return res.status(400).json({ message: 'The document needs a slug before it can be previewed.' })
diff --git a/web/styles/themes.ts b/web/styles/themes.ts
index bf5919d92..ed6b1bfce 100644
--- a/web/styles/themes.ts
+++ b/web/styles/themes.ts
@@ -41,8 +41,6 @@ export const normal = css`
 
   /**@ Title Highlight  */
   --title-highlight-color: var(--energy-red-100);
-
-  --color-inverse: var(--inverted-text);
 `
 
 export const inverted = css`
@@ -65,5 +63,4 @@ export const inverted = css`
   --accordion-icon-color: var(--white-100);
   --breadcrumbs-inactive-color: var(--grey-30);
   --title-highlight-color: var(--spruce-wood-100);
-  --color-inverse: var(--default-text);
 `
diff --git a/web/types/types.ts b/web/types/types.ts
index b1116c5e3..9f65f2d9b 100644
--- a/web/types/types.ts
+++ b/web/types/types.ts
@@ -813,8 +813,6 @@ export type KeyNumbersData = {
   disclaimer?: PortableTextBlock[]
   items: KeyNumberItemData[]
   useHorizontalScroll: boolean
-  designOptions: {
-    background: BackgroundColours
-  }
+  designOptions: DesignOptions
   action?: LinkData
 }