Can't figure out how to add background-image with Kirby

Kirby 2 Solved ✅
1

Hi guys.
First of I would like to say that having tried Kirby for a couple of days, it seems like even the most simple person (i.e me) can get some basic templating done without running into to many problems. In short, I really like it. However, I’ve run into a problem.

In my test template I’m trying to add a background image to a hero-image thing at the top of the page. At the moment it looks something like this:

.main-photo {  
  background: url("assets/img/chelsea2.jpg");
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 3em;
 }

Is there a way I can use Kirby to set the background in my css so that I can input a different hero-image on every page?
I’ve had a look around the forums and tried to just brute-force it but I am unable to find an answer or even a place to start.

Sorry for the (I suspect) newbie question and thanks once again for a really nice cms.

Alex.

2

Hi Alex!

The simplest soloution would be to add some inline css

<div class="main-photo" style="background-image:url(<?php echo $page->background() ?>)"></div>

or a style tag to your head.

<style type="text/css">
  .main-photo {
    background-image: url(<?php echo $page->background() ?>);
  }
</style>

Till

1 Like
3

Hi Twirx. I will try that!
Thanks for the quick reply.

4

You can references images in your CSS like so…
background: transparent url(’…/images/bg-footer.png’) 0 0 no-repeat;

This will work as long as you have an image called ‘bg-footer.png’ in ‘assets/images/’