fededark1702
fededark1702

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

that0n3guy
that0n3guy

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');

victorobaitor33836
victorobaitor33836

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

iterl05439374
iterl05439374

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

endi.linux.mint51510
endi.linux.mint51510

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

endi.linux.mint51510
endi.linux.mint51510

or do like this :

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

Last updated

er.shajidkhan13974
er.shajidkhan13974

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);">

netgeek12355183
netgeek12355183

@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

netgeek12355183
netgeek12355183

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 %}

1-9 of 9