-
|
Hi! I'm not sure if this is the right place to post this, but one of the kids I'm mentoring asked if they could change the background image in their CSS based on the name of an image file specified in the frontmatter. Is this something they'd do with Nunjucks or something else? Thanks in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 1 reply
-
|
I quote myself from Discord :-) This was the example brought up in Discord: test.md: ---
title: Test Background
layout: test.njk
bg-image: '/img/hp-background.jpg'
---
{% if bg-image %}
<style>
.bg {
background: #fff url({{ bg-image }}) no-repeat center center/cover;
height: 100vh;
}
</style>
{% endif %}
<div class="bg">
</div>test.njk <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!DOCTYPE html>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body, html {
height: 100vh;
}
</style>
<title>{{ title }}</title>
</head>
<body>
{{ content | safe }}
</body>
</html>
|
Beta Was this translation helpful? Give feedback.
-
|
I don't see a reason, why this shouldn't be possible with other template languages as well. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! I had been experimenting along similar lines and came up with a similar answer. 😁 |
Beta Was this translation helpful? Give feedback.
I quote myself from Discord :-)
This was the example brought up in Discord:
test.md:
test.njk