Setting background-color in div is not working

Question

I am in a bit of a problem here. I am trying to set the background color of <div id='coupons'> but when I do, nothing is happening! Please help me out on this. I left a majority of the css as I do not have any conflicting background-color tags.

 #coupons { background-color: black; }

 <div id='coupons'> <a id="coupons" name='coupons'> <div style="float:left"> <img id='myImg' src="https://preview.ibb.co/jBYUxv/coupon1.png" id="i1" height="300px" width="600px"> <div id="myModal" class="modal"> <span class="close">× </span> <img class="modal-content" id="img01"> <div id="caption"> </div> <script> // Get the modal var modal = document.getElementById('myModal'); // Get the image and insert it inside the modal - use its "alt" text as a caption var img = document.getElementById('myImg'); var modalImg = document.getElementById("img01"); img.onclick = function() { modal.style.display = "block"; modalImg.src = this.src; } // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } </script> </div> </div> <div id='pformat'> <p>COUPONS FOR YOU! </p> </div> </a> </div>

Answer 1

Your div inside #coupon is floating, wich means #coupons colappses... meaning it has no height thus no backgroudn. try this... #coupons:after { content: ""; display: table; clear: both; } to clear its floating children.

Answer 2

It appears your .png isn't transparent. The image itself has a white background.

The id #coupons is used more than once, perhaps this is giving unwanted results.

Answer 3

As @Barmar said, I can see the black behind the image, so I'm assuming you are looking for a jQuery solution.

[In addition, @Joe B. makes a valid point about the transparency of you're png]

If you're trying to change the background color with jQuery you can use .css() :

 $('#coupons').css(`background-color`, 'pink');

 #coupons { background-color: black; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="coupons">I am a coupons</div>