Hola Graciela, espero estes bien.
Es un poco confuso al comienzo ver las rutas, pero una vez sepas este, veras que es muy fácil.
Abrir el buscador (/):
Cuando vayas hacer referencia o a llamar algún archivo, puedes hacerlo con la barra slash (/) y hay se te verán reflejados los archivos que estan al mismo nivel.
Archivos al mismo nivel:
Los archivos que están al mismo nivel, son los archivos que se encuentran en la misma carpeta donde está el archivo en el que estás trabajando.
Quedaría en el ejemplo que nos diste:
background: url("/banner.png").
Archivos en otras carpetas:
Estos archivos son mas complicados de buscar, por que por mas carpetas afuera tengamos del archivo en el que estemos trabajando mas simbolos tendremos que escribir.
Consejo: es bueno tener todas las imagenes, banner, iconos y demás dentro de una misma carpeta y este este dentro de la carpeta donde este el archivo index.html.
../ Esto significa que haz salido de la caperta donde esta el archivo index.html y estas en la carpeta anterior a esa, y entre mas ../ pongas, son mas carpetas anteriores estas saliendo para encontrar el archivos.
En el ejemplo que nos dices sería que saliste dos carpetas anteriores y entraste a una llamada img y en esa estaba el banner.
background: url("../../img/banner.png")
| Carpeta 1|
| Carpeta 1.1| Carpeta 1.2 | carpeta IMG | acá saliste a la segunda y entraste a carpeta IMG
| Carpeta 1.1.1 | Carpeta 1.2.1 | banner.png | ** acá saliste a la primera carpeta**
|index.html|
Espero que te haya quedado claro.
