Problem using inline CSS to set background image

Kirby 2 Solved ✅
1

I’m trying to set up my site so that each blog/page will have a unique header background image that is grabbed from that page’s folder.

Currently I’m attempting to use inline CSS to accomplish this, but it’s producing some weird results.

<div class="header" style="background:red url(<?php echo $page->image() ?>) no-repeat center top">

However nothing is showing up. I’m using firebug to see what’s going on, and it appears to be working fine when I look through the HTML, but under the computed CSS the url gets all jarbled.

It goes from

C:\xampp\htdocs\kirby-project\content\blog\header.jpg
to
c:xampphtdocskirby-project%0Content%0Blogheader.jpg

What’s causing this? Or is the image not showing up for an entirely different reason?

kirby issue.png1175×500 42.9 KB

2

I think you just need to add ->url() after ->image()

so <div class="header" style="background:red url(<?php echo $page->image()->url() ?>) no-repeat center top">

1 Like
3

Wow, I had a feeling it would be stupid easy. I’m glad it was, thanks!