Кнопка не отображает изображение

Итак, полный URL-адрес страницы, на которой объявлен элемент <style>, выглядит следующим образом:

http://localhost:8080/JEE/pages/Menu.jsf

И полный URL-адрес файла изображения, который вы хотели бы использовать в <style>, явно не указан вами, но это, скорее всего, основано на предоставленной на данный момент информации:

http://localhost:8080/JEE/image/add.jpg 

Ваша конкретная проблема, скорее всего, вызвана тем, что вы каким-то образом ожидали, что именно сервер встраивает изображения в документ HTML на основе структуры проекта сервера. Однако это совершенно неверно. Вместо этого веб-браузер загружает изображение отдельно относительно URL-адреса основного ресурса, ссылающегося на ресурс изображения (который может быть либо файлом CSS, либо, в вашем случае, самой страницей JSF) и включает его в визуализированное представление HTML.

Таким образом, если вы укажете url("/image/add.jpg") с косой чертой в начале, что сделает его URL-адресом, относящимся к домену, браузер попытается загрузить изображение из:

http://localhost:8080/image/add.jpg 

Однако это неверно. Если вы обратили внимание на HTTP-трафик в наборе инструментов разработчика браузера, то вы должны были заметить, что браузер получил ошибку HTTP 404 при запросе изображения. Вам необходимо включить контекстный путь, если вам нужно указать URL-адрес, относящийся к домену. Вы можете сделать это статически:

.imagesbuton {
    background-image: url("/JEE/image/add.jpg");
}

или динамически:

.imagesbuton {
    background-image: url("#{request.contextPath}/image/add.jpg");
}

В качестве альтернативы вы можете использовать относительный URL-адрес, при котором вы переходите на одну папку вверх от /JEE/pages до /JEE, а затем в папку /image:

.imagesbuton {
    background-image: url("../image/add.jpg");
}