I created my own custom 404 error page which is located at: (you can check it out here)
However, when I intentionally trigger a 404 error by visiting , everything appears except for the orange background image that I have designed.
If anyone has any suggestions on how to resolve this issue, please let me know!
The issue lies in using a relative path for the URL in your CSS code. For instance...
url('assets/images/opacity.png')
Consider changing it to an absolute path...
url('/errors/assets/images/opacity.png')
Update: Another important point to note is...
When you utilize url in CSS within the <style> tag, relative paths are based on the current page location. On the other hand, when including url in CSS through the <link> tag and .css files, the path will be relative to the location of the specific .css file.
To resolve the issue, simply convert the relative path of the background image to an absolute one and all problems will be resolved
.oh {
...
background-image: url('/assets/images/opacity.png');
...
}
When inspecting both pages with firebug, an error is evident on the second page: it is loading an image from , however the correct URL should be . Make sure to use the complete URL.
utilize
background-image: url('/errors/assets/images/opacity.png');
in lieu of
background-image: url('assets/images/opacity.png');
Modify the CSS URL for .oh
from
url("assets/images/opacity.png")
to
url("/issues/assets/images/opacity.png");
During the development of my ASP.NET project, I encountered an issue where scripts that were placed in the "Head" section of my layout page were not accessible for use in the rendered view. The code snippet from my layout page looks like this: <!DOCT ...
My goal is to neatly align a group of images at the bottom of a fixed-height div. The images all have the same height and width, making the alignment easier. Here is the current structure of my code: <div id="randomContainer"> <div id="image ...
Currently, I am incorporating bootstrap-datetimepicker for Vue (found at https://www.npmjs.com/package/vue-bootstrap-datetimepicker) via CDN. The date display looks good, however there is an issue with the month view size when selecting a month. https://i ...
Can anyone help me out? I am having trouble using AJAX to submit my form to one location and then to another. Once it's posted to the second location, I want it to send an email with PHP to a specified recipient, but for some reason, it's not wor ...
Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...
const tasks = `[{ "taskName": "Task 1", "image": "./images/task1.jpg", "description": "Task 1 description", "importance": 0 }, { "taskName": "Task 2", "image": "./images/task2.jpg", "description": "Task 2 description", ...
I have been working on implementing a verification process to check if a user is logged in when accessing a specific HTML file. When a user tries to access something.html without being logged in, I would like to redirect them to index.php and restrict acc ...
While working on a project, I encountered an issue with the scrollHeight of dynamically generated content. In some cases, the function to determine whether or not to include a "more" button in the content would return a value of 0 for scrollHeight, causing ...
Seeking guidance for completing a homework assignment, I want to clarify that I am not asking for answers to be provided. Rather, I simply need some direction. The task at hand is creating a dice game. My main challenge lies in connecting Javascript code ...
I am currently working on a Jenkins job that utilizes the HTML publisher plugin to run selenium automation tests and produces a link to a HTML test result report on the Jenkins job details page. I am seeking a way to share this HTML report link with stak ...
I'm having trouble placing my vertical scrollbar inside my div and adjusting its position. To streamline the code, I have extracted a portion below: .toprightcontrols { margin: 0 3% 0 0; display: flex; position: absolute; justif ...
I am trying to create a custom scrolling feature for iframe content specifically for iPad. Currently, I have set up my iframe like this: <div id="scroller" style="height: 300px; width: 100%; overflow: auto;"> <iframe height="100%" id="iframe" ...
Here is the HTML Code: <li class="dropdown span pull-right username"> <a href="#" id="username">…….</a> <!-- Unauthenticated : This content will only be shown to unauthenticated users--> ...
The following twig loop is used to generate data: {% for reservationDate, rooms in data.pricingTable %} <tr> <td> {% for room in rooms %} <tr> <td ...
While attempting to create a demonstration on jsfiddle, I encountered an issue where the click event for the toggle button is not firing. An error message stating myclick is not defined appears. I have researched other solutions that suggest using the No ...
I am facing an issue with a form where there is a submit button inside it, as well as another button within the form that has attributes type=button and onclick=somefunction(). The button with the onclick function works perfectly fine, but the other button ...
I've been grappling with this issue for quite some time. As a newcomer to HTML and Jquery, I'm looking to switch images after multiple clicks. Any advice and tips would be greatly appreciated! After some trial and error, I discovered that the IF ...
When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...
I'm facing an interesting challenge where I need to display multiple select tags with multiple options each, resulting in a data structure that consists of an array of arrays of objects. <div class="form-group row" *ngIf="myData"> <selec ...
I am currently utilizing bootstrap 4 and have a list of items that I am displaying in the following manner: <div class="container"> <div class="row"> <div class="card col-md-4 col-sm-6 col-12 item-wr" *ngFor="let item of items"> ...