CSS Background Color Not Working

CSS background color not working

Try like this..

.question-template {
    width: auto;
    height: auto;
    background-color: blue;
    overflow:auto;
}

Why does background-color have no effect on this DIV?

Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.

CSS Body background-color doesn't work?

if you add !important after "aqua", does it work?

@charset "utf-8";
body
{
    background-color: aqua !important;
}

If yes, then there's probably some other styles, like the bootstrap.css interfering.

You also should put your custom css file after the bootstrap-css.

body background color not showing?

Comment your Bootstrap include and see if the body is applied. You should try to test with the minimal amount of code first and then add in things.

If that doesn't work, you can use an inspector in Firefox or Chrome to see what CSS effects are applied.

You also may want to use the network inspector in Chrome to determine if your stylesheet is actually even getting downloaded or if the link is incorrect.

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

Background color not changing when it's hovered CSS

I found a solution for this, We can use Javascript instead of relying on CSS for this

HTML

<a onmouseenter="onHover()"  onmouseleave="notHover()" href="#">Text<a>

<div class="cursor"></div>
<div class="cursor2"></div>

JS part

const cursor = document.querySelector(".cursor");
const cursor2 = document.querySelector('.cursor2');

document.addEventListener('mousemove',(e) =>{
  cursor.style.left = e.pageX + 'px';
  cursor.style.top =  e.pageY + 'px';
  cursor2.style.left = e.pageX + 'px';
  cursor2.style.top =  e.pageY + 'px';
} )

function onHover(){
  cursor.style.backgroundColor = "white";
  cursor.style.height = "70px";
  cursor.style.width = "70px";
  cursor2.style.backgroundColor = "transparent";
  console.log("hello")
}

function notHover(){
  cursor.style.backgroundColor = "transparent";
  cursor.style.height = "50px";
  cursor.style.width = "50px";
  cursor2.style.backgroundColor = "white";
}

CSS

*{
    cursor: none;
}
body{
    background-color: black;

}
.cursor{
    position: fixed;
    width: 50px;
    height: 50px;
    border: 1px solid #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .12s;
  }
  
  .cursor2{
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #c6c6c6;
    border-radius: 50%;
    left: 0;
    top: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: .06s;
  }
  
  .nav:hover ~ .cursor {
    background-color: white;
  }

Thanks to the one who helped with this problem I found an alternative way to do this and want to share this with everyone so if anyone is stuck with this. Thank you once again to who helped me

background-color not working with body

Two possibilities I can think of are:

1) Your style is being overridden by another style. You could try background-color: gray !important; and see if that works.

2) Your body doesn't actually have any height (i.e. if there are floated items that haven't been cleared) Inspect it in Chrome or Firefox and make sure the body takes up the full height of the page.

CSS Background Color Not Working