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

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


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.

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


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"
<%@taglib uri="" prefix="sf"%>
<%@taglib uri="" prefix="c"%>
<%@taglib uri="" prefix="crt"%>
<%@taglib uri="" prefix="s"%>
<!DOCTYPE html>
<meta charset="ISO-8859-1">
<title>Hotel List</title>
<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">
      <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>
  <c:forEach items="${list}" var="li" varStatus="u">
      <c:when test="${sessionScope.user.userRole == 'User' }">
      <a href="${pageContext.request.contextPath}/booking">Book</a>
      <a href="${pageContext.request.contextPath}/hotelEdit?id=${}">Edit</a>
      <a href="${pageContext.request.contextPath}/hotelDelete?id=${}">Delete</a>