Issue with Background Color and Google Chrome

Issue with background color and Google Chrome

Never heard of it. Try:

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}

Why is my background-color not working in Chrome?

Bootstrap's background color is overwriting your main.css so the background-color property is taken from the bootstrap css file. Change the order of your css files.

    <html>
<head>

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
    <title></title>
</head>
<body>
    <div class="container quoteCard">
            <p id="quote" class= "text">Txt</p>
            <button class = "btn getQuote ">Get new Quote</button>
    </div>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src = "main.js"></script>
</body>
</html>

This will work

Strange Chrome TD background-color issue

As I had noted in comments, td.selected does show up with green background in Chrome Version 38.0.2125.101 m but it does not work in the latest Chrome. It seems to be a regression in behavior or possibly an informed decision to make it not work. I can't comment on why the behavior has changed but in my opinion it is a regression.

There is a however a fix available for the latest version of Chrome. The part that seems to be causing the trouble is the background-color: white that is applied to the tr. Remove it from tr and apply the white background to the td instead. This seems to make it work properly.

This works fine in Chrome v48.0.2564.22 dev-m, Chrome v38.0.2125.101 m, Safari v5.1.7 (on Win 7) IE11, IE10, IE9, Edge, Opera and Firefox.

.suggestions {

  max-height: 0;

  overflow: hidden;

  transition: max-height 1s ease-in-out;

}

input:focus ~ .suggestions {

  max-height: 500px;

}

table, input {

  width: 100%;

}

tr {

  /* background-color: white; remove this */

}

td {

  width: 14.258%;

  cursor: pointer;

  position: relative;

  background-color: white; /* add it here */

}

td:hover {

  background: blue;

  color: white;

}

td.selected, td.selected:hover {

  background: green;

}

<div class="field">

  <input type="text" />

  <div class="suggestions">

    <table>

      <tbody>

        <tr>

          <td>1</td>

          <td class="selected">2</td>

          <td>3</td>

          <td>4</td>

          <td>5</td>

          <td>6</td>

          <td>7</td>

        </tr>

      </tbody>

    </table>

  </div>

</div>

Google's Chrome auto adds background-color:yellow to element.style

Seems like some of your chrome plugins did that. You could disable them one by one to find out which plugin did that.

Google Chrome Profile's Background Color Turned Black

I was having the same problem. I found a different question where someone has found the solution:
Chrome update forcing darkmode on websites

ShadowMare's solution worked for me:

"Completely remove the Adobe Acrobat Extension for now from your browser. This seems to cause the issue."
(https://stackoverflow.com/a/71254463/14017735)

Background color not showing in print preview

The Chrome CSS property -webkit-print-color-adjust: exact; works appropriately.

However, making sure you have the correct CSS for printing can often be tricky. Several things can be done to avoid the difficulties you are having. First, separate all your print CSS from your screen CSS. This is done via the @media print and @media screen.

Often times just setting up some extra @media print CSS is not enough because you still have all your other CSS included when printing as well. In these cases you just need to be aware of CSS specificity as the print rules don't automatically win against non-print CSS rules.

In your case, the -webkit-print-color-adjust: exact is working. However, your background-color and color definitions are being beaten out by other CSS with higher specificity.

While I do not endorse using !important in nearly any circumstance, the following definitions work properly and expose the problem:

@media print {
    tr.vendorListHeading {
        background-color: #1a4567 !important;
        -webkit-print-color-adjust: exact; 
    }
}

@media print {
    .vendorListHeading th {
        color: white !important;
    }
}

Here is the fiddle (and embedded for ease of print previewing).

Issue with Background Color and Google Chrome