Image Layout

The image layout has a fullscreen background image with optionallly a (transparent) overlay color over it. It is the base class for other layouts as well (cover, section).

Arguments

Name	Type	Description	Default
color	String	Background color
color-opacity	Number	Opacity of the background color	0.75 if image else 1
image	String	Background image (can be local file or URL)
image-opacity	Number	Opacity of the background image	1
image-filter	String	CSS filter for the image
image-transform	String	CSS transform for the image

Slots

/

Examples

Default

	--- layout: image class: stack text-center image: https://images.unsplash.com/... --- ## You can add content as well. ---

Color

image-color

---
layout: image
class: stack text-center font-800
image: https://images.unsplash.com/...
image-filter: blur(2px)
image-transform: scale(2)
color: var(--kul-orange-400)
color-opacity: 0.5
---

# Be Creative

---

Gradient

image-gradient

---
layout: image
class: stack text-center text-black font-600
image: https://images.unsplash.com/...
color: 'linear-gradient(
  45deg,
  #eea2a2 0%,
  #bbc1bf 19%,
  #57c6e1 42%,
  #b49fda 79%,
  #7ac5d8 100%
)'
---

## This wall is white

<style>
    .slidev-layout::after { mix-blend-mode: multiply; }
</style>

---