how to access media files from css

Hello,

I set the STATIC and MEDIA root and url in the project settings.py, I have some models that contain upload images, and everything works fine with the STATIC and MEDIA behaviors,
and I can load picture from static folder to be used in parallax (div with background-image scroll able), my problem is that I want the user uploaded images be used in the HTML parallax and
for this I need to be able to address by url from css to access the user uploaded images in the MEDIA directory. How this is possible?
I appreciate any hint/guide.

I can’t think of any direct way of using it in the static css files themselves, because the purpose of the static file setup it to allow files to be served without going through Django and the template processor.

So if I had to do this, I would probably do it one of two ways:

  • I could include the css inline in my template and use the static/media references in that portion of the css

  • I could write a small javascript function that would set the css element to some value, where that value is set in the template using the json_script filter. (The javascript and css would remain in their separate files)

There might be other ways of doing this - those are just the first two that I thought of.

Ken

1 Like

Thank you for your reply.
I used the style=“background-image: url({{ i.bg_imageURL }})” in the loop in django html and it was what I wanted.
and I defined the other style parts in css.

Try

background:url('{{post.featured_image.url}}') no-repeat;

worked for me