Background image does not show

Kirby 3 Solved ✅
1

Hi there,

I am having a small issue with my background picture not showing. Maybe someone spots my mistake? The <img …> bit works and shows the picture, the <div…> does not show the picture as background, tho.

HTML:
<?php $image = $page->image('background.jpg'); ?>

    <div class="header_img" style="background-image: <?= $image->url() ?>">		        
    </div>
    <img src="<?= $image->url() ?>">

CSS:

.header_img{	
    background-repeat: no-repeat;
    background-position: center; 
    position: relative;
    min-height: 400px;
}

It creates a 400px high empty box and then the picture from <img…>.

Any hints? Thanks!

2

Hi,

did you try:

background-image: url(<?= $image->url() ?>);

Mind that the CSS Tag uses “url()” to wrap the URL-value.

3

Why do you use a container with a background and an additional image element?

Just on a side note: Use an if statement to check if the image exists…

4

I added the <img…> just for testing purposes. I will delete it as soon as the background image works. Added the if statement.

@sennah the url bit did the trick, thanks.