Blurry or less opaque bg image

Card Design
1

Hello,
I’m using an animated (webp) background image in the styling section like so;

background-image: url("_bg.webp");
background-attachment: fixed;
background-position: center bottom;
background-repeat: no-repeat;

But on the backside of the cards, it’s really distracting as it interferes with the text.
How could I add some blur to it just on the backside and/or make it more transparent?

2

Could you provide the code of your cards html and css? That would make finding a solution a lot easier!

That being said webp animated images should behave just like normal images…

3

Sure thing, but I didn’t trim much the previous time:

.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-image: url(‘_bg.webp’);
background-attachment: fixed;
background-position: center bottom;
background-repeat: no-repeat;
background-color: white;
}

It doesn’t really matter if the background is webp or png or any other image format. I just wanted to be precise.
The question is how I can change the opacity and/or blurriness of the background image on the back side of the cards.

1 Like
4

The best solution i could come up with was to have two separate image files, one blurred and one that isnt and just using the corresponding one for either the front or back card template

Add this code to your front and back card template (and replace the path) to use separate pictures.

<style>
    body {background-image: url("YOUR IMAGE PATH")}
</style>

Make sure you dont have a {{FrontSide}} field on the back, that would mess with the background image.

1 Like
5

I use a pseudo element and add the background-image to it. This way, I can use a blur filter for the ::after element without blurring the card content. Also, I like to use CSS variables to keep stuff orderly:

CSS

/* Values for light theme (+ dark) */
.card {
  --background-image: url("_day.jpg");
  --background-blur: 10px;
  --background-position: center;
}

/* Values exclusive to dark theme */
.card[class*="night-mode"],
.night_mode,
.card.nightMode {
  --background-image: url("_night.jpg");
  --background-blur: 4px;
}

/* Pseudo element allows blurring */
/* background separately from text */
.card::after {
  height: 100vh;
  content: "";
  background: var(--background-image);
  background-size: cover;
  background-position: var(--background-position);
  background-repeat: no-repeat;
  -webkit-position: fixed;
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

See how this uses different images for light and dark theme? It also uses different blur values.

To answer your original question:

On the backside, you can just give your card an extra class that has a blur applied to it:

Append to back template

<script>
    setTimeout(() => document.body.classList.toggle("blurred"));
</script>

Append this to the CSS

.card.blurred::after {
  -webkit-filter: blur(var(--background-blur));
  filter: blur(var(--background-blur));
}
5 Likes
6

Thank you!
Is this part fails on Ankiweb and Ankidroid?

setTimeout(() => document.body.classList.toggle("blurred"));