0

Is there a way to change the default background color used when displaying initial image files in Filepond? Currently, the images are resized to fit into the control with the extra background space using black. I can get standard file types to display with a different background color but not with images.

enter image description here

I have tried to modify the css but not having any luck.

smedcalf
  • 21
  • 4

2 Answers2

1

You need to set a background color to the div with class name filepond--image-preview.

.filepond--image-preview {
    background: red;
}

Please note that to override the original selector you have to load this one after loading the image preview styles OR make the selector more specific:

.filepond--root .filepond--image-preview {
    background: red;
}
Rik
  • 3,328
  • 1
  • 20
  • 23
0

there are instruction on how to override the styles in the documentation: https://pqina.nl/filepond/docs/api/style/#fonts-and-colors

and here is the css you may been looking for:

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
    background-color: red;
}
Dendi Handian
  • 348
  • 2
  • 12