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>