Background on one page

Kirby 3 Solved ✅
1

Hi,
how can I put a background image only on one page, not on every page?

Thank you!

2

There are different ways to achieve this, depending on your setup. You can either use different templates/snippets, use an if condition etc.

Could you please provide more information what exactly you are trying to do and where?

And welcome to the forum!

3

Thank you! :slight_smile:
I’m not a professional in programming, but it seems to me to be able to create a website with kirby.
It should be a simple homepage for an artist portfolio.
http://www.christinasperling.com

I want to have a Background Image only on the first page („CHRISTINA SPERLING“) Not on the other pages.

Currently I put the information about Background into the
index.css (… so its on every page):

body {
background-size: cover;
margin: 3rem;
background-image: url("_MG_0794va-swA3.jpg");
}

In my content folder of the page is only one file. content / 1_home / home.txt
With the information „Title: CHRISTINA SPERLING“

And my default.php looks like this:

<html lang="en">
<?= $site->title() ?> <?= css('index.css') ?> 
<header>

    <nav class="menu">
        <?php foreach ($site->children()->listed() as $subpage): ?>
        <a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
        <?php endforeach ?>
    </nav>

</header>
<?= $page->text() ?>

What would be the simplest way to show only one page witch background image?

4

I’d put the background image as style attribute on the body element directly instead of into your CSS.

Then in your template, you can check if the current page is the homepage, and based on this condition, either output the style or not.

<body<?= $page->isHomePage() ? ' style="background-image: url(_MG_0794va-swA3.jpg)"' : '' ?>>
5

Thank you soooo much!!! finally it works :smiley:

6

Sorry, one more question.
How can it looks if I want the same on a different page, for example only on „contact“?
Is it possible to change only the name?

<body<?= $page->isHomePage() ? ' style="background-image: url(_MG_0794va-swA3.jpg)"' : '' ?>>

7 
<body<?= in_array( $page->id(), ['home', 'contact'] ) ? ' style="background-image: url(_MG_0794va-swA3.jpg)"' : '' ?>>
1 Like