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>      



Solution 2:

Change background image into JSP, spring boot application

Create a CSS file with the name  style.css and add it to the CSS folder under the resources.

background-image: url('../images/back.jpg');	
background-size: cover; 
height: 650px;
padding: 200px 0px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
height: 100%;

width: 1200px;
margin: 0px auto;

font-size: 75px;
font-family: raleway-bold;
line-height: 90px;
Required changes on the JSP page where you bg image 
<div class="home-content-wrapper">
  <div class="overlay-box">
   <div class="container">
    <div class="welcome-text">WELCOME TO <br/>Online Furniture Shop</div>	
Change under the layout folder into(classic.jsp)
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/style.css">