Marp框架下为特定类幻灯片添加全局背景图片的技术咨询

I’ve run into this exact issue with Marp before—your current CSS targets the section.title element, but Marp’s default slide styling adds padding to sections, and the background image defaults to fitting the element’s content box instead of the full slide. Here’s how to fix it:

Step 1: Adjust Background Properties & Remove Padding #

The key is to ensure the background image covers the entire slide, not just the area around your title. Update your CSS rule for section.title with these properties:

section.title {
  justify-content: center;
  /* Path note: Use forward slashes even on Windows, or double backslashes */
  background-image: url('Path/to/your-title-bg.png');
  /* Force image to cover the entire slide */
  background-size: cover;
  /* Center the image to avoid awkward cropping */
  background-position: center center;
  /* Prevent image repetition */
  background-repeat: no-repeat;
  /* Remove default section padding that was truncating your background */
  padding: 0;
}

Step 2: Ensure Full Slide Dimensions (If Needed) #

If you still see gaps at the edges, explicitly set the section to match the viewport size (Marp slides use viewport units by default):

section.title {
  /* Add these to the previous rule */
  height: 100vh;
  width: 100vw;
  /* Make sure padding/borders don't affect the total size */
  box-sizing: border-box;
}

Step 3: Preserve Your Custom Title Styling #

You can keep your existing title text styles, and even add a semi-transparent background to improve readability against your image:

section.title h1 {
  font-size: 60px;
  letter-spacing: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  /* Optional: Add a light background to make text pop */
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
  border-radius: 4px;
}

Full Working CSS Example #

Putting it all together, your custom theme CSS will look like this:

/* Custom title slide styles */
section.title {
  justify-content: center;
  background-image: url('Path/to/your-title-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  padding: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
}

section.title h1 {
  font-size: 60px;
  letter-spacing: 10px;
  margin-bottom: 0;
  padding-bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10px 20px;
}

Quick Path Tip #

On Windows, avoid single backslashes in your image path—they’ll be interpreted as escape characters. Use either forward slashes ('images/title-bg.png') or double backslashes ('images\\title-bg.png').

内容的提问来源于stack exchange，提问作者NorrinRadd