CODEWITHSUNDEEP
htmljsp
Bobby
Bobby

Reputation: 35

Adding Image as a background in JSP

I have a JSP in which I am trying to add a background Image. I am getting the nav bar from a header into the body. I am trying to add the background image to the body and when I add it, it is overlapping on the navigation bar. Below is the code of my JSP:

<jsp:include page="index_header.jsp"></jsp:include>
   <div class="container"> 
       <div style='position:absolute;zindex:0;left:0;top:0;width:100%;height:100%'>
           <img src='images/im3.jpg' style='width:100%;height:100%' alt='[]' />
       </div>
   </div>

How do I keep the nav bar on the page and add image to the rest of the body. Kindly help me fixing this.

Upvotes: 0

Views: 39287

Answers (1)

whistling_marmot
whistling_marmot

Reputation: 3893

You can add a background image to the navbar whose URL points to a blank image.

<html>
<head>
<style>
body {
    background-image: url("images/im3.jpg");
}
.no-background {
    background-image: url("images/blank.jpg");
}
</style>
</head>
<body>
<h1 class="no-background">Hello World!</h1>
</body>
</html>

I just created blank.jpg with the default image when you open MS Paint. In my example, I've added the no-background class to the h1 element. You would instead add this class to your nav-bar.

Upvotes: 3

Related Questions