How to display background image in servlet

Question

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>ServletApplication</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
    <description></description>
    <display-name>DemoServlet</display-name>
    <servlet-name>DemoServlet</servlet-name>
    <servlet-class>com.mayu.servlet.DemoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>DemoServlet</servlet-name>
    <url-pattern>/DemoServlet</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>Login</display-name>
    <servlet-name>Login</servlet-name>
    <servlet-class>com.mayu.servlet.Login</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>Login</servlet-name>
    <url-pattern>/Login</url-pattern>
  </servlet-mapping>
  <servlet>
    <description></description>
    <display-name>RoomMaster</display-name>
    <servlet-name>RoomMaster</servlet-name>
    <servlet-class>com.mayu.servlet.RoomMaster</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>RoomMaster</servlet-name>
    <url-pattern>/RoomMaster</url-pattern>
  </servlet-mapping>
</web-app>

above you see my Web-xml

this is output i need, but when integreted with servlet i get only login without image

 .hr {
            background: url("../img/login.jpg");
        }

<html>
<head>
    <title>Reservation</title>
    <!-- Include CSS File Here -->
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/Site.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <!-- Include JS File Here -->
    <!--<script src="js/login.js"></script>-->
    <script src="js/jquery-1.9.0.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
    
</head>
<body class="hr">
    <form id="myform" method="post" action="RoomType.html" name="myform">
        <div class="row">
            <div class="col-md-8 col-sm-10 col-xs-12 col-md-offset-2 col-sm-offset-2">
                <div class="jumbotron">
                    <form class="form-horizontal" style="margin-top:50px; margin-bottom:50px;">
                        <div class="form-group">
                            <label for="inputEmail3" class="col md-2 col-sm-2 col-md-offset-2 control-label" style="padding:0px;">User Id</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="text" name="username" id="username" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-md-2 col-sm-2 col-md-offset-2 control-label" style="padding:0px;">Password</label>
                            <div class="col-md-6 col-sm-6 col-xs-12">
                                <input type="password" name="password" id="password" />

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-3">
                                <!--<input type="button" value="Login" id="submit" onclick="myFunction()"/>-->
                                <input type="button" onclick="myFunction()" value="Login">
                            </div>
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </form>
    <script>
        function myFunction() {
            document.getElementById("myform").submit();
        }

        $(document).ready(function () {
            $('.combobox').combobox();
            //$('.combobox').combobox({newOptionsAllowed: false});
            $('form').submit(function (e) {
                e.preventDefault();
                alert($('input[name="normal"]').val());
                alert($('input[name="horizontal"]').val());
                alert($('input[name="inline"]').val());
            });
        })

        //document.getElementById("TextBox1").value = Date()
    </script>
</body>
</html>

I am doing a web base project working on servlet, in that I created servlet page and added my css,js,img folder to the WebContent folder. My problem is I set a image to the body background that image can't seen on browser. i added my login page code please see and help me to solve this.

What have you tried so far? What is the URL to retrieve the page you have shown above? What is the URL to retrieve the 'login.jpg' image separately? — Jason, May 25 '16 at 06:52
See till i have a login page with background image, html code work fine when run without servlet, but when that html code added in servlet then the background image not working all the other are working my validations,css are working only background image not working — MSK, May 25 '16 at 06:56
No idea if related but you have nested forms. That's illegal — Jaqen H'ghar, May 25 '16 at 07:46
Do you see a resource not found error in browser's console?! — KlajdPaja, May 25 '16 at 08:58

score 0 · Answer 1 · answered May 25 '16 at 09:05

0

Try making following change:

.hr {
        background-image: url("/img/login.jpg");
    }

answered May 25 '16 at 09:05

Dhaval Simaria

1,886
3
28
36

score 0 · Answer 2 · answered May 25 '16 at 09:21

You are using the wrong way to get the image, the path of your file depends on the name of your war so the best way to do it would be by using , so if you have this structure:

Webapp
 |-- img
 |    `-- login.jpg
 `-- WEB-INF
      |-- 
      `--

Your images url would be: 'my_portlet_021_/img/login.jpg' and to set this image as a background I suggest using jQuery in jsp this way:

var url='url(<%= request.getContextPath()%>/img/login.jpg)';
$('.hr').css("background-image", url);

here <%= request.getContextPath()%> gets the name of your web app.

How to display background image in servlet

2 Answers2