How do I reference images from fields to my CSS?

[icemagic]

I’m studying Famous paintings right now for exams, and I’m interested in design. I want my cards to look better. I have an intermediate knowledge of CSS, so throw whatever you can at me.

[Anon_0000]

How do I reference images from fields to my CSS?

You could just do something like this:

Front / Back Template

<div id="my_img">{{Image}}</div>

CSS

#my_img {
    /* Do something */
}

Or you could just reference img in css like this:

img {
    /* Do something */
}

---

I suppose if your goal is to add the image as a background, then you could add the image field to body and apply the image to background, then apply a blur effect.

[icemagic]

I don’t think that would help my problems, because the CSS can’t grab the image from the {{Image}} field… If you know JS, could you help me with that? I suspect that’s what we’ll need to solve the problem.

[jcznk]

As a very rough sketch:

<div id="imageContainer" style="display: none;">{{Image}}</div>

<script>
  var container = document.getElementById("imageContainer");
  var img = container.querySelector("img");
  var imageURL = img ? img.getAttribute("src") : "";

  if (imageURL) {
    var card = document.getElementsByClassName("card")[0];
    if (card) {
      card.style.backgroundImage = `url('${imageURL}')`;
    }
  }
</script>

[Danika_Dakika]

Duplicate post: Reddit - The heart of the internet