Background image disappear when `layout: center` is set

[Davphla]

Describe the bug

When setting layout: center, the background disappear

Minimal reproduction

Steps to reproduce the behavior:

Create a file slides.md

---
theme: seriph
paginate: true
transition: slide-left
title: Welcome to Slidev
background: https://marp.app/assets/hero-background.svg
mdc: true
layout: center
---
a

This should display the background, but it does not. When removing layout: center, it act normally

Environment

• Slidev version: 51.6.0
• Browser: Firefox
• OS: Arch Linux

[toreis-up]

This doesn’t seem to be a bug. The center layout in @slidev/theme-seriph currently doesn’t support the background field from the frontmatter/headmatter.

If you want to use a background with the center layout, I recommend creating a custom layout/center.vue like this:

<script setup lang="ts">
import { computed } from 'vue'
import { handleBackground } from '@slidev/theme-seriph/layoutHelper'

const props = defineProps({
  background: {
    // random image from a curated Unsplash collection by Anthony
    default: 'https://source.unsplash.com/collection/94734566/1920x1080',
  },
})

const style = computed(() => handleBackground(props.background, true))
</script>

<template>
  <div class="slidev-layout center h-full grid place-content-center" :style="style">
    <div class="my-auto">
      <slot />
    </div>
  </div>
</template>

That said, I personally feel that supporting the background field in the frontmatter/headmatter for the center layout would make for a better overall experience.