How to perfectly fit the whole image in the container block

I did end up fitting the image into the middle, however how can I show a blurred banner in the background to fill the container

This the template for that single event page, if it helps, Template Code for my single event page

This is sample image, of what I would like to achieve, the black marker part I would like the blurred version of the image as that speciifc columns bakcground outcome picture

Hi Dikson,

I believe that section of your page is created through a plugin called The Events Manager? It would be best to reach out to them with regards to this.

Otherwise, in GeneratePress Premium, you can use a Block Element and use GenerateBlocks to add that image.

Thank you, I already have this code to display the current banner version

wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-event-single-image-wrapper .wpem-event-single-image img, .wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top .wpem-single-event-slider-wrapper .wpem-single-event-slider .wpem-slider-items img {
max-height: 390px;
max-width: 568px;
height: inherit;object-fit: cover;
background: #104e8b;
margin: 0 auto;
}

So there is no way to give blurred background image to that banner column using css?

Try adding this CSS:

.wpem-slider-items {
    background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
    background-size:cover;
}

Note that I got the image URL from your other site. That image is blurred itself, it's not blurred through code. It may be good to upload a copy of that in your current site as well. Then, use the new URL.

Yes this is perfect, but is there way to automatically do it, rather than writing css for each event?

Would the images be different for each event? Is it based on the Featured Image or a Post meta of the event?

If so, this is doable through GeneratePress Premium and GenerateBlocks. Currently, you're using the plugin to display that image.

Yes the image will be based on the main banner image of that event, is it possible to do so through manual css code for each event?

I don't think that's possible. It may be good to ask the Events Calendar support first.

You know how you did it for all the events the same, is there a way I can change the blurred image using the pageid

something like this

e.g

.postid-46110 .wpem-slider-items {
background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
background-size:cover;
}

Yes, that should work. You'll need to manually change the Image URL for each post though.

Sorry it didnt work, do you know the exact css to write for a specific page e.g this page https://eventik.com.au/event/mens-night-out/

It works.

Try this:

.postid-54267 .wpem-slider-items {
    background: url(https://cdn.filestackcontent.com/blur=amount:10/resize=width:300/NpWlC9UDQHSaHEqEJtlt);
    background-size:cover;
}