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>
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.
.home-content-wrapper{
background-image: url('../images/back.jpg');
background-size: cover;
height: 650px;
}
.overlay-box{
padding: 200px 0px;
box-sizing: border-box;
background: rgba(0, 0, 0, 0.5);
height: 100%;
}
.container{
width: 1200px;
margin: 0px auto;
}
.welcome-text{
color:#FFF;
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>
</div>
</div>
</div>
Change under the layout folder into(classic.jsp)
<link rel="stylesheet" href="${pageContext.request.contextPath}/resources/css/style.css">
