How to add background image on a page in JSP, HTML

Java web application Development tutorial, jsp, Spring Tutorial / By

How to Add a background image on a JSP or HTML page? While working on a java web project, Sometimes we need to add a single background image for the entire page.

This tutorial will show easy steps to add an image to the JSP or HTML page. for example, we are displaying a list of data in a table format and will add a background image for the page so that the table data will be displayed above the background image.

Steps to add a background image on a page in JSP, HTML

  • Define a CSS class
  • Call the CSS class into the body tag

style.css

Inside the style.css create a custom class with the attribute background-image: url('../image/Bg.jpg');  the URL will take the image path as a parameter.

.bgimage{
 background-image: url('../image/Bg.jpg');
    height: 100vh
}

.jsp

Open your JSP or HTML page where you need to add the background image and call the defined class as class="bg-image bgimage"

<body class="bg-image bgimage"> </body>

Complete the code to add background image for HTML table

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="sf"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jstl/core_rt" prefix="crt"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Hotel List</title>
</head>
<body class="bg-image bgimage">

<div class="container">

<h2 style="padding: 30px">Hotel List</h2>
<%@include file="businessMessage.jsp" %>
<table class="table bg-light text-dark">
  <thead>
    <tr>
      <th scope="col">Hotel Name</th>
      <th scope="col">City</th>
      <th scope="col">Address</th>
      <th scope="col">Contact</th>
      <th scope="col">Price</th>      
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
  <c:forEach items="${list}" var="li" varStatus="u">
    <tr>     
      <td>${li.hotelName}</td>
      <td>${li.city}</td>
      <td>${li.address}</td>
      <td>${li.contact}</td>
      <td>${li.price}</td>
      <td>      
      <c:choose>
      <c:when test="${sessionScope.user.userRole == 'User' }">
      
      <a href="${pageContext.request.contextPath}/booking">Book</a>
      
      </c:when>
      <c:otherwise>
      <a href="${pageContext.request.contextPath}/hotelEdit?id=${li.id}">Edit</a>
      <a href="${pageContext.request.contextPath}/hotelDelete?id=${li.id}">Delete</a>      
      </c:otherwise>
     
      </c:choose>
     
      </td>
    </tr>
   </c:forEach>
  </tbody>
</table>

</div>

</body>
</html>