What could be causing the image URL to not function properly in the CSS file?

I have been struggling with this issue all day and have searched numerous sources for answers.

The login.css file can be found at:

WebContent/resources/css/login.css

The image file is located here:

WebContent/resources/img/pencil.jpg

Despite my attempts to set the background image of the body using this CSS:

body{
    background-image:url("../img/pencil.jpg") center center no-repeat;
}

This method does not seem to work! I even tried another approach: inserting an image directly into my JSP page without utilizing CSS. The JSP file is located at:

  WebContent/WEB-INF/views/login.jpg

And the image is stored at:

 WebContent/resources/img/calendar.png

The code in the JSP is as follows:

<img src="../../resources/img/calendar.png"/>

However, both methods failed to display the image! Everything else seems to be functioning correctly, except for the images. I cannot figure out why.

Below is the console output:

[27 17:48:25,515 DEBUG] [http-nio-8080-exec-2] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/login]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/css/login.css]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-4] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/js/login.js]
[27 17:48:26,232 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - DispatcherServlet with name 'todo' processing GET request for [/ToDoList/resources/library/jquery-3.0.0.min.js]
...
(Additional console output)
...

[27 17:48:26,270 DEBUG] [http-nio-8080-exec-5] servlet.DispatcherServlet - Successfully completed request
[27 17:48:26,274 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - Null ModelAndView returned to DispatcherServlet with name 'todo': assuming HandlerAdapter completed request handling
[27 17:48:26,274 DEBUG] [http-nio-8080-exec-3] servlet.DispatcherServlet - Successfully completed request

Answer №1

Include the c tag in your jsp file:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

Modify the code in your jsp as shown below:

<img src="<c:url value="/resources/img/calendar.png"/>"/>

Answer №2

After conducting thorough research for a day, I finally managed to solve the problem with the assistance of different friends. Grateful for their help!


  1. To begin with

    If you are utilizing Spring MVC like myself, pay close attention to this section. Within the Spring MVC project, I attempted to integrate CSS and JS into the JSP files. All JSP files were placed in a directory named "views" within WEB-INF. Additionally, I created a folder named "resources" at the same level as WEB-INF under WebContent. Within the "resources" folder, all images were located under the "img" directory, while CSS and JS resided in the "css" and "js" directories respectively. To ensure resources could be located, the following line was added to the spring-servlet.xml file (not web.xml, your filename may differ):

    <mvc:resources mapping="/resources/**" location="/resources/"/>
    . When incorporating CSS and JS into the JSP pages, include the following:
    
    <link type="text/css" rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/login.css"/>
    
    <script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/login.js"></script>

By following these steps, successful linkage between JSP and CSS/JS can be achieved. Alternatively, alternative tags can also be utilized for this purpose.


  1. Secondly

    When it comes to adding images to the JSP page, there are two main approaches. Firstly, images can be inserted directly into the JSP:

    <img src="<%=request.getContextPath()%>/resources/img/calendar.png"/>

    Alternatively, images can be included through the CSS using relative paths. It is recommended to use relative paths that are based on the location of the CSS file rather than the JSP file:

    • ./ denotes current directory

    • ../ signifies parent directory

    • / represents the root directory

    • ../../ indicates movement back two directories before starting

In my specific scenario, the correct syntax would be:

`background-image: url("../img/pencil.jpg");`

Additionally, it's crucial to avoid appending "no-repeat" after the Background-image attribute.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The wrapper is failing to extend the full height of the entire page

Initially, I thought setting the height of my wrapping div to 100% would be a quick task that I could complete in five minutes. However, it ended up taking me hours, so now I'm here hoping someone can assist me with this commonly asked question. The ...

Is there a way to apply border-radius to the header of a table in Bootstrap 5?

My use of Bootstrap 5 for styling a table has encountered an issue. Even with the border-radius set on the table-dark class, the thead element's border does not change. I am looking for a way to address this problem. Any suggestions? .table-dark { ...

Use custom styles or CSS for the file input element: <input type="file">

Can CSS be used to achieve consistent styling for <input type="file"> in all browsers? ...

Transferring data between two screens within an Ionic app by harnessing the power of angularJS

As a beginner in Ionic and Angular development, I am currently facing an issue with my Ionic application. I have two pages - one with drop-down selects and a submit button, and another page to process the user's choices and display the results. The pr ...

Using jQuery to target a specific item from a retrieved list of elements

I'm currently working on a photo gallery feature that is reminiscent of Instagram or Facebook user photos. My goal is to enable users to view details about each image (such as the date) in a box that appears over the image when they hover over it. E ...

Unexpected output from Material UI Textfield

When attempting to print a page of my React app using window.print(), everything prints correctly except for the Textfield component from Material UI. It works fine when there are only a few lines of text, but when there is a lot of text, it appears like t ...

Ensuring the validity of float and non-empty values in JavaScript

Embarking on the journey of web development, I'm delving into basic applications. My current project involves creating a straightforward webpage to add two numbers and implementing preliminary validations - ensuring that the input fields are not left ...

Scrolling a table to the current ng-init date in AngularJs: What’s the best approach?

I found a code snippet in my DOM that sets the current date on a table. <table id="daysTableLeft" class="table table-hover" ng-init="getHorraire(pickDateRow,$index,0)"> <tr ng-repeat="fd in getFullDayDate track by $index ...

How can I arrange images vertically instead of placing them side by side?

I need help figuring out how to display multiple images in a vertical format instead of horizontally in the code below. The images are wide and take up too much space if shown side by side. My coding skills are basic, so specific guidance on where to mak ...

Incorporating object into main function of VueJS root component

I have integrated VueJS into my HTML template for an application. When a button is clicked, it passes the object of a component to its root in the following manner: <button v-on:click="$root.savePlan(dataObj)"></button> The dataObj is passe ...

Tips for creating an HTML report using Python

Currently, I am searching for a solution to convert my saved matplotlib graphs as png files along with some data frames into HTML format. This is similar to how I typically use R2HTML in R. Despite my efforts, I have not been able to locate clear informat ...

Having trouble with document.getElementById.innerHTML not displaying the correct content?

document.getElementById works in getting the element, but for some reason, the content disappears as soon as it is written in it. There are no errors on the console to indicate what's causing this behavior. I have been unable to identify the reason b ...

Looking to retrieve the value of a selected checkbox within a horizontally laid out HTML table

Trying to extract values from a table with a horizontal header when checkboxes are selected. The goal is to retrieve the values of the selected column for all rows. Code snippet provided below. <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

Instructions on how to add an ExternalLink to a webpage linking back to the previous page

I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

Challenges encountered while working with OpenWeather API

I created a weather prediction web application using p5.js. It functions perfectly on my local server. However, I keep encountering this issue on the GitHub page: Mixed Content: The page at '' was loaded over HTTPS, but requested an insecure ...

Html content overlapping div rather than being stacked vertically

My goal is to arrange a group of divs inside another div in a vertical stack. However, I am facing an issue where the text from the last div is overlapping with the second div instead of following a proper vertical alignment where the text in the third div ...

Unconventional border effect while hovering over image within navigation container of Bootstrap

Whenever I hover over the image inside the navigation bar, there is a strange white/gray border that appears. It's quite annoying. Does anyone know how to remove this border? Here is the code snippet causing the issue: <ul class ...

JQuery GET brings back unnecessary HTML content

Currently utilizing a PHP cart class and implementing some jQuery to dynamically update a div when users add products. The issue I'm encountering is that upon adding a product, the list of products on the HTML page gets duplicated (see screenshot) ev ...