Może tu jest problem, ścieżki względne są parsowane w zależności gdzie leży plik css z danymi url(...) względem folderu z obrazkami.
Przykład
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<img src="img/img1.png">
<div class="img1"></div>
<div class="img2">Nie ma obrazka w tle</div>
</body>
</html>
div {
border: 1px solid red;
}
.img1 {
width: 300px;
height: 150px;
/*
wyjście z folderu style o 1 folder w górę .. (dwie kropki)
wejście do folderu img
*/
background-image: url(../img/img1.png);
}
.img2 {
width: 300px;
height: 150px;
/*
ten obrazek się nie załaduje, ponieważ folder style
nie zawiera folderu img
*/
background-image: url(img/img1.png);
}
.img1::after,
.img2::after {
content: 'class="' attr(class) '"';
font: 900 2.5em monospace;
color: red;
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
częstym rozwiązaniem, gdy strona znajduje się już na serwerze jest podawanie całych ścieżek w przypadku np. ładowania obrazków.
background-image: url(https://moja.strona.pl/img/img1.png)