Background Image and Logo Image is not displayed in jsp page?

I am new to integrate UI Design in application. I have a jsp page and whick code is given below:

<!DOCTYPE html>
<%@page import="java.util.Enumeration"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags" %>

<html lang="en">
<head>
<jsp:directive.include file="include_metatags.jsp" />
<title><s:message code="form.home.testEvosnapResponse" arguments="${applicationScope['APPLICATION_HEADER_TEXT']}"/></title>
<jsp:directive.include file="include_head.jsp" />

<link href="${pageContext.request.contextPath}/resources/css/datatables.min.css" rel="stylesheet">
<style>
        body,html{
                    background-image      : url("resources/img/xyymm/home.jpg");
                    background-attachment : fixed;
                    background-position   : center center;
                    background-size       : cover;  
                }
    </style>
</head>
<body>

    <jsp:include page="menu.jsp">
        <jsp:param value="xylyx" name="currentpage" />
    </jsp:include>

    <div class="container amo2">
        <div class="card card-container2"
            style="padding: 20px 40px 90px 40px;">
            <img id="profile-img" class="profile-img-card" src="resources/img/xyymm/fintech_img.png">  

            <h4 style="margin-bottom: 20px;">Evosnap Response Page</h4>

            <div class="container-fluid mer table-responsive" id="wht">

                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/home">Home</a></li>
                    <li><a href="${pageContext.request.contextPath}/evosnapTest">Evosnap Test</a></li>
                    <li>Evosnap Response Page</li>
                </ol>

                <div class="body-content" style="padding-left: 15px;">

                    <p>${message}</p>
                    Transaction Details
                    <table style="width: 60%">
                        <tr>
                            <td><s:message code="form.transactionlist.transactionId" /></td>
                            <td>${transaction.transactionId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.merchantId" /></td>
                            <td>${transaction.merchantId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.customerId" /></td>
                            <td>${transaction.customerId}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.name" /></td>
                            <td>${transaction.lastName},${transaction.firstName}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.invoiceNumber" /></td>
                            <td>${transaction.invoiceNum}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.amount" /></td>
                            <td>${transaction.amount}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.ipAddress" /></td>
                            <td>${transaction.ipAddress}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.currency" /></td>
                            <td>${transaction.currency}</td>
                        </tr>
                        <tr>
                            <td><s:message code="form.transactionlist.orderStatus" /></td>
                            <td>${transaction.orderStatus}</td>
                        </tr>
                    </table>

                </div>

            </div>
            <!-- /card-container -->
        </div>
    </div>

    <jsp:directive.include file="include_body_scripts.jsp" />
</body>
</html>

below is my screenshot when I run this jsp file:

I want background image here which I added as inline css but background image is not dispalayed proper and also logo is not displayed.

Please anybody can help me to get this? Thanks in advance.

Answer

Your page is at /FTL/evosnapRedirectController/success/1485323783355. The relative URL resources/img/xyymm/home.jpg in the inline css resolves to /FTL/evosnapRedirectController/success/resources/img/xyymm/home.jpg, but it seems that the resource is actually at /FTL/resources/img/xyymm/home.jpg

You need to include the context path in the background URL:

background-image      : url("<c:url value='/resources/img/xyymm/home.jpg'/>");

background-image      : url("${pageContext.request.contextPath}/resources/img/xyymm/home.jpg");

Advertisement

Answer