Is it possible to set the background image inside .CSS file as we normally do we plain HTML?

1

I am migrating my website (written with HTML, CSS, and JS) into a GRAV project. I have a long set of media rules inside my CSS files for my background images. But when I run the project, the Images are not read. It seems they are being ignored.

    @media (min-width: 3200px) and (-webkit-min-device-pixel-ratio: 2),
  (min-width: 3200px) and (min-resolution: 2dppx) {
  [data-visible='true'] .image-2sy_q {
    background-image: url('../images/image_1a9jevki6koxp9.jpg');
  }
}
@media (min-width: 3840px) {
  [data-visible='true'] .image-2sy_q {
    background-image: url('../images/image_1a9jevki6koxp9.jpg');
  }
}
@media (min-width: 3840px) and (-webkit-min-device-pixel-ratio: 2),
  (min-width: 3840px) and (min-resolution: 2dppx) {
  [data-visible='true'] .image-2sy_q {
    background-image: url('../images/image_1a9jevki6koxp9.jpg');
  }

Is there a way to fix this?

thanks

2

Don’t have ATM how to test, but I guess paths are incorrect. Try changing to /user/themes/myTheme/images/image_1a9jevki6koxp9.jpg or similar, depending on where your images are at

1 Like