Relative paths act differently when they are used in a CSS file. The behavior is still the same, and the path is still relative, but to a human it might seem confusing.
When you use a path like this for your image:
<img src="https://wordpress.stackexchange.com/path/image.jpg"/>
The browser will look inside the path folder, located at the root of the current web. But when you use the very same value inside your CSS:
background-image: url( "https://wordpress.stackexchange.com/path/image.jpg" );
The story is different. The browser will look inside the path folder, based on where the stylesheet is located, not the current URL. So, if the stylesheet is located at:
www.example.com/wp-content/themes/twentyseven/
Then browser will look for:
www.example.com/wp-content/themes/twentyseven/path/image.jpg
Which doesn’t exist. So it’s important to build your CSS paths relative to the stylesheet’s path.
For a further understanding, have a look here.