The background image is not showing up

I've been grappling with a CSS background-image dilemma that's got me stumped.

Here's the situation:

CSS

#yes {
   background-image:url("../tick.png");
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
}​

#no {
   background-image:url("../cross.png");
   background-repeat: no-repeat;
   height: 16px;
   width: 16px;
}​

HTML

    <td id="yes"></td>
    <td>Item 1</td>
    <td id="no"></td>
    <td>Item 2</td>

Result

No matter what I try, I just can't seem to get the #no id to cooperate.

  • I've verified that I can access the image through a web browser and it displays correctly.
  • Even when I substitute cross.png with tick.png (a known working image), it still refuses to show up.
  • I attempted using the absolute path 
    background-image:url("http://.../cross.png");
    but to no avail.

What else is there left to troubleshoot?

While I know I could simply opt for <img... tags (which function flawlessly), I am determined not to be beaten.

Could someone please help end my torment!?

An immense thank you in advance.

cssbackground-image

Answer №1

After seeking help from JBaczuk, it was discovered that there were strange characters in the CSS file causing parsing issues.

These unknown characters were preventing the CSS file from being fully interpreted.

Notepad++ and Notepad did not reveal these characters, but a quick search on Google led to a Stack post explaining their origin (which was beyond my understanding).

To fix the problem, I decided to delete the #yes and #no ids and recreate them using classes instead, which successfully resolved the issue.

I hope this solution can be of assistance to someone else experiencing a similar difficulty in the future, as I found myself incredibly frustrated during this process.

A big thank you to everyone who offered their support!

Answer №2

After reviewing your code, it seems that the issue may lie with the #no selector. It could be a case of non-uniqueness or an error in the priority level of your selectors. I made minimal changes to your code and now it's functioning as expected.

#yes,
#no {
  display: block;
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
}
#yes {
  background-image: url("https://example.com/yes.jpg");
}
#no {
  background-image: url("https://example.com/no.jpg");
}
<table>
  <tr>
    <td id="yes"></td>
    <td>Item 1</td>
    <td id="no"></td>
    <td>Item 2</td>
  </tr>
</table>

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

Transitioning the height of a Vue component when switching routes

I've been struggling to implement a transition slide effect on my hero section. The height of the hero is set to 100vh on the homepage and half of that on other pages. Despite trying various methods, I haven't been able to get it working properly ...

javascriptcssvue.jsfrontendvuejs3

Extend the height of bootstrap 5.2.0 row/column to reach the bottom of the page

I'm having difficulty extending the left navigation section to reach the bottom of the page while remaining responsive. Despite trying various solutions like h-100, flex-grow, min-vh-100m self-align: stretch, nothing seems to solve the issue. Check o ...

htmlcssheightbootstrap-5

The standard color code applied to an HTML button

I need to create an anchor element <a> that resembles an HTML button. However, I am struggling to find the default background color for the input type button. ...

htmlcss

Background color applied to row elements in div containers

I've been experimenting with integrating table content into CSS floats, but I'm facing some challenges. My current strategy involves using divs at the "table," "row," and "cell" levels. However, I'm not convinced that this is the most effec ...

css

Unusual behavior of diagonal viewBox in SVG

Trying to understand how the viewBox attribute works in SVG, but the code below is confusing me. Can someone please explain if this is a bug or the expected behavior of SVG? I can't seem to figure out what I'm doing wrong... <svg class="s ...

csssvgpositionviewboxsizing

Tips for customizing the CSS of a child component that has been imported from a different module in Angular 2

I have been using agm-snazzy-window from amg-snazzy-window There is a mention that I can modify the css class, but when I try to do so, it doesn't seem to work. Here is an example: map-component.html <agm-snazzy-info-window [closeWhenOthersOp ...

cssangularsass

What is the best way to eliminate all styles from an element with jQuery?

body{ font-family: Arial; } div{ color: red; margin: 20px; background: blue; font-size: 17px; } <div id="div1">this should be styled with a blue background, red text, and 17px Arial font</div> <div id ...

jqueryhtmlcss

Dynamic text overlay on a versatile image

With the help of bootstrap, I've created a mobile-responsive image with overlay text and a button that should be centered on the image. However, the text doesn't stay centered when the screen size is reduced. What it's supposed to look like: ...

htmlcssbootstrap-4

Ensuring React's setupProxy functions properly in conjunction with express.js

I've encountered an issue while trying to pass images from express to react. My express.static is correctly set up, so when I visit localhost:5000/public/images/me.jpeg, the image loads in my browser. However, when I attempt to use <img src="/publi ...

javascripthtmlcssreactjsexpress

Is it possible to create a resizable menu without distorting its appearance?

After setting up a menu on my website, I noticed that when resizing the window, it spills over into other divs on the same line. Despite trying multiple solutions, I have been unsuccessful in resolving this issue. The navigation for the menu is contained w ...

htmlcssresponsive-design

Discovering the proper method to reach the parent element in jQuery while within the click event

How can I use jQuery to access the parent element within a click event? $(document).ready(function () { $(".lv1 li").click(function (event) { this.parentElement.parentElement.textContent = this.textContent; $.ajax({ type: 'post&apo ...

javascriptjqueryhtmlcss

HTML/CSS Top Bar: Position two contents at opposite ends of the top bar

I am attempting to design a top bar with the following layout Tel:4949494949 social media icons In the center, I want to display contact information and on the right side, my social media icons. However, ...

htmlcssnavbar

How to Align Paypal Button in the Middle of a Table Cell within a Concealed Form Using HTML and

Currently, I am in the process of developing a payment page that enables payments through Paypal using Instant Payment Notification. The initiation of this process involves sending a POST request to Paypal via a submit button along with multiple hidden for ...

htmlcssalignmentvertical-alignment

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

imagecss

Responsive background image not displaying properly

The developer site can be found at http://www.clhdesigns.com/cliwork/wintermeresod/about.php I am encountering an issue where the background image on the home page scales perfectly, but on the about us page it does not scale at all. I am seeking a solutio ...

htmlcss

Navigate to the following section on an HTML page by clicking a button using jQuery

Within my application using Jquery / Javascript, I am looking to implement a specific functionality. I currently have several div elements like the ones below: <div id="div1"></div> <div id="div2"></div> <div id="div3"></ ...

javascriptjqueryhtmlcss

Display React elements on the web page

Seeking assistance from anyone! I've been grappling with a problem and can't seem to figure out a solution. Here's the scenario: My current setup involves a sidebar and a top bar for navigation in React. Check out my app so far in this imag ...

javascriptcssreactjstypescriptreact-router

Generating a downloadable picture with jQuery freeze frame

If you're looking to add animation to a gif upon mouseover, the Freezeframe plugin created by Chris Antonellis is the perfect solution. Simply use the command below: < img src="image.gif" freezeframe /> For a live example, visit his website he ...

jqueryhtmlcss

What are some techniques for concealing a CSS transition beneath another element in both directions?

Witness the magic in action! By clicking on the black box below, a larger black box will gracefully emerge from beneath the sidebar. While it may not be as clear in jsfiddle, rest assured that this effect is more pronounced in browsers. Thanks to some clev ...

javascriptjqueryhtmlcsscss-transitions

Styling Tip: Aligning text to the baseline of a height-adjusted input field using CSS

As per the information from the Mozilla documentation, it states that I can align the text in an input field to the baseline if the element's display property is set to inline-block. I have made adjustments to the height of several input elements, bu ...

htmlcss