The stylesheet's URL reference to the image is not functioning properly

I'm attempting to showcase images inside a table cell using CSS. Here's what I currently have:

HTML:

<td class="activity-status status_not_started">Not Started</td>

CSS:

td.activity-status {
font: 0/0 a !important;
color: transparent !important;
width: 80px !important;
padding: 0 !important;
}

td.status_major_issues:after {
content: url(/sites/ih/Style%20Library/org-ih/img/status_major_issues.png) !important;
}

When I visit the following URL in my browser:

http://myspsite/sites/ih/Style%20Library/org-ih/img/status_major_issues.png

The image displays as expected.

However, after the CSS is applied on the webpage, the image appears broken.

The path to the page is:

http://myspsite/sites/ih/46/Pages/status.aspx

The path to the CSS file is:

http://myspsite/sites/ih/Style%20Library/ih-status/css/style.css

Any thoughts on what might be causing this issue?

Thank you! Eric

css

Answer №1

It seems like your CSS is located in a different directory, so the path to the content should be adjusted accordingly.

content: url('../sites...')

In order to correctly reference the content, you need to navigate up one directory from where the CSS file is located, as paths are relative to the location of the CSS file rather than the page's scripts.

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

Displaying a div on click is simple with CSS and JQuery, but what if you want it to stay visible even after a second click? By utilizing classes within <li> tags instead of buttons

My current code involves clicking on a menu, which should reveal a list where each item has a corresponding section that slides down and slides back up when clicked. However, only the sliding down functionality is working at the moment. I'm new to jQu ...

jquerycssshow-hide

<v-time-picker> - issue with time selection

<v-time-picker> - Are you certain that the component was properly registered? If dealing with recursive components, remember to include the "name" option <div class="form-inline"> <label for="">Time</label> <v-time-pick ...

cssvue.jsvue-componenttimepicker

Mobile Menu in wordpress stays visible after being clicked

I recently created a one-page layout that includes some links. However, when I view the site on my smartphone and open the main menu using the button to click on a link (which scrolls within the same page), I noticed that the mobile menu remains visible a ...

javascriptjquerycsswordpress

Tips for efficiently moving through divs in a personalized single page application?

Exploring the world of JS frameworks and single page app functionality is a bit of a mystery to me. Currently, I have a pseudo single page app set up without any specific framework in place. The setup involves 3 tabs that toggle visibility for 3 different ...

javascriptjqueryhtmlcssajax

Prevent redirection on buttons within ionic lists

THE ISSUE: I am facing an issue in my Ionic app where I am using the ion-list component. Each item in the list can be swiped to reveal a button (add/remove to favorites). Additionally, each item serves as a link to another page. The problem arises when ...

javascriptcssangularjsionic-framework

Achieving proper stacking of a table with other div elements

I've come across some similar inquiries, but none seem to fully address the specific issue at hand. If there's an existing thread on this that I overlooked, I apologize in advance. So, here's a multi-part problem: my solution for the first ...

htmlcsshtml-tableflexbox

Make the child div images disappear gradually and at the same time, make an overlapping parent div image appear using Javascript

Check out my attempt at solving this challenge on jsfiddle: http://jsfiddle.net/oca3L32h/ In the scenario, there are 3 divs within a main div. Each of these divs contains an image and they overlap each other. By using radio buttons, the visibility of the ...

javascriptjqueryhtmlcssimage

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

htmlcss

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

htmlcssangularjs

Creating a button with multiple background gradients using CSS

When working on a button element that already boasts a gradient effect, my aim was to integrate a small play image directly in the center. However, achieving this without compromising the current layout and ensuring compatibility across various browsers pr ...

htmlcssbuttongradient

Adjusting the panel dimensions based on the screen size

One feature on my website is a sliding panel (Image 1) located on the right side. It appears and disappears when a button is clicked, covering the entire height of the screen.https://i.sstatic.net/dF5Zc.jpg Here's the CSS code for this sliding panel- ...

htmlcssangularcss-positionresponsive

Stacking a Bootstrap column above another column

Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...

htmlcsscss-positionbootstrap-5

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

htmlcssfirefox-quantum

What is the best way to swap out text for an image in CSS?

I came across a website that I am working on: The site features a slider with 2 tabs named "TAB1" and "tab2" My goal is to replace the text with unique images for each tab Below is the CSS code snippet: .dnd-tabs.dnd-tabs-style1 .ui-tabs-nav li.ui-tabs ...

htmlcss

What is the best way to insert images into a div in Ionic framework?

I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...

cssangularionic-frameworksassionic4

Vibrant Reverberation of Color

When creating a table connected to a MySQL database, I encountered an issue with changing the text color inside the rows. How can I display the text in white within the table? I attempted to use <style = color #34242, but it didn't produce the des ...

phpcss

Updating the contents of one specific div without affecting all other divs with the same class

Below is the HTML code snippet in question: <a class="btn test-btn test-btn-1"> <span>Content 1</span> </a> This particular code block appears multiple times on the page. The number at the end of test-btn- is dynamically generat ...

javascriptjqueryhtmlcss

Conceal button divider on pager in Jqgrid

Within my grid setup, there are 3 buttons placed in the pager section: 'Refresh', 'Constution', and 'Developed'. These buttons are separated by two vertical navSeparators. Upon grid load, the 'Developed' button is hi ...

javascriptjqueryhtmlcssjqgrid