Styling inside components

I have used the background image like this:

---
<Image src='https://farm5.staticflickr.com/4810/31993107578_77df74653c_k_d.jpg' alt='comenzando' />

# That's me!

After importing the component. The image is OK, but I can’t seem to get the text right on the page, either it’s on top or on the bottom. Can it be shown centered?

[tomwayson]

It is now in the image, but the style is not the same as the rest of the deck. I’m using h1, it gets the font right, but not the size; it’s also on the top of the page.

I’m having almost exactly the same issue.

For example, w/ the dark theme (so that the text will be visible over the image) and this code:

import { Image } from 'mdx-deck'

<Image src="https://images.unsplash.com/photo-1462331940025-496dfbfc7564?w=2048&q=20">

# Slide title
Some text
</Image>

I get this:

Note how the slide content is not centered vertically and that there is a 1em margin above the image.

Where as with:

# Slide title
Some text

I get:

How can I set the background image for a slide and have the text content be vertically centered the way it would otherwise. Should I be using a custom layout instead?

[JJ]

Thanks. It is now in the image, but the style is not the same as the rest of the deck. I’m using h1, it gets the font right, but not the size; it’s also on the top of the page. Does it have different styling then?