The CSS no-repeat background image property seems to be functioning properly only in the Firefox

.myclass{
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;

}

Every row (tr) in my table is assigned the class myclass: <tr class="myclass"> In Firefox, the image only appears in all cells of the first column of the table, but in Chrome and Opera, the background image shows up in all cells of the table. How can I ensure it displays only in the first column in Chrome and Opera as well?

Here is the HTML code:

<table>
  <tr class="myclass">
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr class="myclass">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
</table>

Answer №1

Here is how you should set it up:

.myclass td:first-child {
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;
}

Check out this link for more information

Answer №2

Include .myclass on the first occurrence of th and td

.myclass{
  background-image: url('http://image.flaticon.com/icons/svg/34/34164.svg');
  background-repeat: no-repeat;
  background-size:contain;
  background-position: 1.5%;

}
<table>
  <tr >
    <th class="myclass">Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td class="myclass">Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</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

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

The confirm() function shows up before the background on a blank layout

I'm facing an issue where whenever my confirm() function pops up, the alert box displays correctly but then the background turns blank. I've tried various solutions like moving the entire if statement to the bottom of the page or at the end of th ...

Mobile display issue with Foundation 4 topbar navigation

I am experiencing an issue with Foundation 4 not rendering correctly on a small screen. When running on a local server, my custom CSS and JS are disabled, even though all the necessary libraries including the Foundation library are properly loaded: Why is ...

Conceal rows in a table that are not selected using Jquery when the table has been loaded from a given URL

Below is the HTML code for an user search input field and the results table: <div class="input-group"> <input type="text" id="q" class="form-control" placeholder="Search for User"> <span class="input-group-btn"> ...

Overflow-y SweetAlert Icon

Struggling with a website modification issue where using Swal.fire(...) causes an overflow problem affecting the icon rendering. How can this be fixed? Here is the custom CSS code in question: * { margin: 0px; padding: 0px; font-family: &ap ...

The submit button appears as grey on IOS when using the input[type="submit"]

Why does the submit input look different on IOS only, and how can this be resolved? https://i.sstatic.net/UVlKB.png Thank you in advance For HTML: <input class="btn" type="submit" [disabled]="" ...

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Trying to utilize jQuery for loading html posts into the main html page and enabling external scripts to function on them. Utilizing a script (load.js) to load posts into the index.html page: $(document).ready(function () { $('#header').loa ...

Ways to reduce the size of a Select box when the option text is too lengthy

How can I reduce the size of the select box by splitting the lines of the options I attempted to modify the CSS with: select { width:100px; } However, only the select element was affected. The options remained the same size. My goal is to have ...

Hyperlinks springing to life on mouseover

After spending countless hours tweaking my CSS code, I've hit a roadblock and need some assistance. My issue lies with the links on hover that seem to be jumping unexpectedly. The goal was to create a mobile-responsive hamburger menu that transforms i ...

Does the rendering of HTML get blocked by CSS in the <head> section like it does with javascript?

While it's common practice to keep JavaScript at the bottom of the HTML document, does the same rule apply for CSS as well? I understand that we can't place external CSS files outside the HTML document. ...

Deciphering click event parameters in an AngularJS application

Currently, I am in the process of improving a feature in an existing application that has already been deployed. Unfortunately, all the JavaScript code is minified, and I only have access to the HTML files. I need to implement a function that triggers when ...

Create a Dynamic Moving Background Image with Endless Scrolling

Is it possible to make a background image animate infinitely and only move upwards without any jerkiness? I am struggling with setting it up this way. Can anyone provide guidance on achieving this? If you need more context, here is the link to the webpage ...

an issue encountered while trying to print a webpage styled with CSS

Users are given the option to print the current page on the website by clicking on a menu element: <li> <a href="#" onClick="window.print()"> <i class="icon-print"></i> Print Page </a> </li> The page contai ...

After pressing the login button, my intention is to transition to a different page

I am relatively new to web development and working with angular. I have a login component that, upon hitting the LOGIN button, should redirect to another component on a different page. However, currently, when I click the button, it loads the data of the o ...

Tips on managing an HTML date picker with the "date" type in Selenium; ensure the HTML DOM remains unchanged after selecting a date

I am currently dealing with an HTML-based date picker and while I can successfully click on it to make the calendar pop up, there doesn't seem to be an option to inspect the calendar. Even when I manually select a date, there is no visible change in ...

Having trouble displaying json data in an HTML file with d3.js

I am having trouble loading data from a json file into an HTML file and using D3 to visualize it. Even though the file loads correctly and is verified with a 200 status, the contents are interpreted as null. Below are the contents of the json file: [{"to ...

Utilizing a CSS stylesheet to style a specific div element within a webpage with bootstrap framework

Recently, I acquired an HTML5 template integrated with Bootstrap. As I started writing HTML code within the template, I noticed some unexpected outcomes, most likely due to the default styles of Bootstrap. Now, I am curious to learn how I can incorporate m ...

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

When a sidebar is added, Bootstrap 5 cards that are supposed to be displayed in a row end up being shown in a column instead

When I have a row of Bootstrap 5 cards that display correctly, but then add a sidebar that causes them to stack in a column instead of remaining in a row. How can I maintain the row layout even with the addition of a sidebar using specific CSS classes or p ...