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
htmlcssimagejspurl

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

Styling the background of a container in CSS using Bootstrap

Currently, I am utilizing bootstrap and trying to find an elegant solution for adding a background to my container. Specifically, I am working with the bootstrap class container, as opposed to container-fluid. The official Bootstrap documentation advises ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Attempting to design a customized tooltip for an SVG element embedded within the HTML code

Recently, I've delved into Js with the goal of creating an interactive pronunciation guide using inline svg. If you're curious to see what I've done so far, check it out here. My current focus is on incorporating basic styled tooltips that ...

javascriptcsssvghovertooltip

Incomplete Rotation CSS Animation

I am attempting to create a horizontal spinning image using only CSS3. Check out my webpage here: You can find the CSS file here: www.csupomona.edu/~lannguyen/ISSM_WEB/css/main.css The code for calling the spin effect is at the top, with the actual imp ...

cssanimation

Adding an event listener to detect left or right mouse clicks - using onclick doesn't capture right clicks

I'm currently in the process of applying for an Internship through this Internship Link One thing that caught my attention right away is the issue with uploading or pasting a cover letter. When attempting to upload or paste a cover letter, it redirec ...

javascripthtmlcssformsweb-inspector

The accuracy of real-time visitor numbers in Google Analytics is often unreliable

My website uses Google Analytics to track the page chat.php. The code snippet is correctly placed on the page according to the documentation. Within this page, there is a Flash object that connects users to an IRC chat room. Currently, there are 50 unique ...

javascriptphphtmlgoogle-analytics

The issue of Ajax failing to execute an HTTP POST request in an HTML environment

I am creating a sample HTML code that involves making HTTP post requests using an Ajax function. The task at hand is to execute 2 HTTP POST requests and 1 GET request sequentially based on the correct response received. POST: URL: http://localhost:8082 ...

htmljsonajax

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

javascriptjqueryhtmlcss

Using jQuery to target the element before

Is there a way to determine the width of elements located before an element when it is hovered over? I attempted to achieve this using the following code: $('ul li').hover(function() { $(this).prevAll().each(function() { var margin = $(this ...

javascriptjqueryhtmlcss

Adjust the width to ensure the height is within the bounds of the window screen?

I am currently in the process of developing a responsive website, and my goal is to have the homepage display without any need for scrolling. The layout consists of a 239px tall header, a footer that is 94px tall, and an Owl Carousel that slides through im ...

javascriptjqueryhtmlcss

I need help with importing CSS in Vue.js

When working with the Vue package, I have a need to import a CSS file directly into the index.html file. Currently, the 'index.html' file mounts #app > 'App.vue', which then mounts Todo.vue using the router. Any assistance on how to a ...

cssvue.jsimportrouter

What causes the $_FILES superglobal to consistently appear empty?

Check out my page Take a look at my form: <h2>Upload Photo</h2> <form name="photo" enctype="multipart/form-data" action="<?php echo $_SERVER["PHP_SELF"];?>" method="post"> Photo <input type="file" name="image" size="30" /> & ...

phphtmlfile-uploadgd

Code for switching between accordion panels with a simple button press

I took some code snippets from a website and developed a shopping cart accordion module. The complete code is available on my CodePen profile, you can access it through this link: http://codepen.io/applecool/pen/YXaJLa <div class="summary"> <but ...

javascriptjqueryhtmlcsstwitter-bootstrap

Enhance the aesthetic appeal of the Search and Filters component in ASP.NET Core using Bootstrap styling

I am struggling to enhance the style and layout of multiple search filters on the page so that the User Experience is improved. I'm unsure how to effectively design this search component. <section class="search-sec"> <div class=&qu ...

htmlcssasp.net-corerazorbootstrap-4

Unable to automate the selection of a dropdown menu using Selenium WebDriver

I am currently utilizing http://www.makemytrip.com/ This is the HTML code. <div class="mrgnBot30 clearFix"> <span class="watch_icn flL"></span> <div class="widget_inner clearFix suggest_me padBot15 flL"> <h3 class="clearFix has ...

javascripthtmldrop-down-menuwebdriverselenium-webdriver

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...

htmlangularionic-frameworkionic3

JavaScript's failure to properly handle UTF-8 encoding

Here is a snippet of code that I found on Stack Overflow and modified: <?php header('Content-Type: text/html; charset=ISO-8859-1'); $origadd = $_SESSION["OriginAdd"] // $_SESSION["OriginAdd"] contains the value "rueFrédéricMistral"; echo $o ...

javascriptphpjsonhtml

Presenting two arrays simultaneously creates angular duplicates

Encountering an issue while trying to display two arrays containing channel information: List of channels List of subscriptions that users have opted for. channels = [ { "id": 1, "name": "arte", "service&q ...

htmlangular

streaming an HTML5 video directly from memory source

After retrieving multiple encrypted data using ajax queries and performing necessary manipulations to turn them into a valid video, I find myself at a standstill. The binary of the video is now stored in memory, but I am unsure how to display it. To confi ...

javascripthtmlvideo

Automate populating input fields with data

I need help with a form that has four input boxes. Is it possible to automatically fill the remaining three input boxes with the value entered in the first box when the user clicks a button using JavaScript? Or should I aim to prefill the textboxes with ...

javascripthtml

"Enhance User Experience with a Bootstrap Dropdown Button Offering Block Level Function

I'm attempting to modify a bootstrap 3 dropdown button to fully utilize the width properties of .btn-block class. It appears that the dropdown button does not respond in the same way as regular buttons. Below is my current code: <div class="row"&g ...

csstwitter-bootstraptwitter-bootstrap-3