Hello! I was playing with October when I've tried to set up a background image from css, but I don't understand how to dow that I tried this syntax:
background-image: url('{{ assets/images/under_construction.png|theme }}'); background-image: url('{{ "assets/images/under_construction.png|theme" }}');
background-image: url({{ assets/images/under_construction.png|theme }});
background-image: url(assets/images/under_construction.png|theme);
but no one seems to work..
Can you help me?

Last updated 3 years ago

CSS does not use twig, so you can't use twig functions there. Just use a relative link just like normal. Like url('../images/imgname.png');

Neither the options in the question nor it's reply work. How does one fix this please

I guess the only suitable option for now is to insert such css as elements style property. Works all the time

I managed to solve this problem by doing this :

from

  <div class="page-header-image" data-parallax="true" style="background-image: url('../assets/img/bg26.jpg');">
  </div>

to

  <div class="page-header-image" data-parallax="true">
    <img src="{{'assets/img/bg26.jpg' | theme}}">
  </div>

Last updated 4 years ago

or do like this :

<div class="testimonials-1 section-image" style="background-image: url({{'assets/img/bg19.jpg' | theme }})">

Last updated 4 years ago

100% working solution for this is, just got to the assets image section and click on the name of image you will get url of the image now add this url as shown below...

<div class="single-hero-slide height-800 bg-img" style="background-image: url(http://visionhealthasia.com/install-master/themes/medica/assets/img/bg-img/hero1.jpg);">

@endi.linux.mint51510 Neither of those solutions will work. I think it is because TWIG will not render dynamic CSS... I have been trying different methods to get

{% if post.featured_images.count %} <div class="featured-images text-center"> {% for image in post.featured_images %} <p style="background-image: url({{ image.path }});"> </p> {% endfor %} </div> {% endif %}

to work but have not figured this out yet unfortunately. I posted an issue on the projects GIT page and was told that I don't know what I am doing and no one else on the planet has this issue...

This works as expected...

<p> <img data-src="{{ image.filename }}" src="{{ image.path }}" alt="{{ image.description }}" style="max-width: 100%" /> </p>

Last updated 3 years ago

Found how to use a featured blog image as a background image...

{% if post.featured_images.count %} {% for image in post.featured_images %} <a class="block bg-image d-flex flex-column" style="background-image: url('{{ image.path }}');"> {% endfor %} <div class="block-content bg-black-op flex-grow-1"> <div class="d-sm-flex justify-content-sm-between align-items-sm-center"> <p> <span class="badge badge-success font-w700 p-2 text-uppercase"> {{ category.name }} </span> </p> <p class="font-size-sm"> <span class="text-white font-w600 mr-5"> <i class="fa fa-fw fa-eye text-white-50"></i> 3.9k </span> <span class="text-white font-w600 mr-5"> <i class="fa fa-fw fa-heart text-white-50"></i> 90 </span> <span class="text-white font-w600 mr-5"> <i class="fa fa-fw fa-comments text-white-50"></i> 23 </span> </p> </div> <h1 class="text-center font-w700 mb-5 mt-100"> {{ post.title}} </h1> <p class="font-w600 text-white-op"> Jose Mills · 12 min </p> </div> </a> {% endif %}

endi.linux.mint51510 said:

or do like this :

<div class="testimonials-1 section-image" style="background-image: url({{'assets/img/bg19.jpg' | theme }})">

This worked for me, thanks.