I Want to Change the Page Background Color, But It Doesn't Work as I Expect in Chrome

I want to change the page background color, but it doesn't work as I expect in Chrome

alert is not required to trigger a DOM rerender, and it also does not so in Chrome (unlike other browsers). To see the intermediate changes, you can use a timeout to insert a delay before the alert. The DOM will be rerendered in that time.

function change_color() {    console.log('6666');    document.body.style.backgroundColor = "green";    setTimeout(() => {        alert("the color has changed to green!");        console.log('6666');        document.body.style.backgroundColor = "blue";    });}

<button type="button" onclick="change_color()">change color</button>

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

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: ...;
}

css background-color won't show up in Chrome browser behind an image

Perhaps you could post screen snapshots of your Chrome vs. Firefox images. Have you cleared your browser cache after making the change to your style sheet and markup?

I did a quick test in Firefox (version 60.0.3) and Chrome (version 70.0.3538.110) and the results look the same to me. How do these compare to what you expected?

CHROME is on top, FIREFOX is on bottom

Chrome

Firefox

Button background color is not showing on edge, but working on Firefox and Chrome

Edge doesn't support the 8-digit color notation. See CanIUse.

Use

background-color: rgba(0, 113, 130, 0.984);

instead.

Background-clip issue on Chrome

It seems fixed in version 71.0.3578.98.

I Want to Change the Page Background Color, But It Doesn't Work as I Expect in Chrome