# \[SOLVED\] Problem with \<div\> background-color in CSS

**URL:** <https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938>\
**Category:** General\
**Created:** [April 30, 2017, 5:37pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938 "2017-04-30T17:37:34Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gml133F](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gml133f/32/115216_2.png) [@gml133F](https://forum.freecodecamp.org/u/gml133F)\
**Post date:** [April 30, 2017, 5:37pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/1 "2017-04-30T17:37:34Z")

</div>

Hi!

[http://codepen.io/gml133F/pen/ZKKKOW](http://codepen.io/gml133F/pen/ZKKKOW)

This is a simplified version of the tribute page I’m building.

I want to have a background image that covers the whole display and have all my content in a “.main” div that is limited to a 960px max-width (for responsive display).

I tried to apply a 0.85 opacity grey background to the “.main” div but the background color is not showing. Other css declarations for the “.main” div are working properly.

The borders are shown for clarity.

Hope the question is formatted right, this is my first post here.

Thank you!

---

<div class="post-metadata">

**Author:** ![brankaandreja](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brankaandreja/32/50274_2.png) [@brankaandreja](https://forum.freecodecamp.org/u/brankaandreja)\
**Post date:** [April 30, 2017, 6:21pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/2 "2017-04-30T18:21:59Z")

</div>

Hi

Here goes my point of view 🙂

My first suggestion is, that you don’t use the container-fluid class for your main div.

“_The .container-fluid class provides a full width container, spanning the entire width of the viewport_”

I downloaded your code and ran it in my browser(chrome) and it works ok. Some browsers do not support the rgba alpha opacity function. Your best bet is to set a fallback background in case a user is using a browser that doesn’t support rgba alpha.

main {  
max-width: 960px;  
box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.2);  
background-color: rgb(217, 217, 217); /\* The Fallback _/  
background-color: rgba(242, 242, 242, 0.85); /_ your original color\*/

border-radius: 1%;  
font-family: Roboto, sans-serif;  
font-size: 22px;  
padding: 10px;  
}

Hope it helps somewhat! I’m just a fellow learner 🙂  
Branka

---

<div class="post-metadata">

**Author:** ![imtoobose](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/imtoobose/32/9914_2.png) [@imtoobose](https://forum.freecodecamp.org/u/imtoobose)\
**Post date:** [April 30, 2017, 6:28pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/3 "2017-04-30T18:28:56Z")

</div>

Your code is fine, but I think some unknown/exotic characters are showing up as spaces. You probably copy-pasted it from somewhere (weird things happen to me with VSCode for instance) and it ended up inserting some unknown characters. I deleted the line with the background property, typed it myself, and it works.

```
.main {
  max-width: 960px;
  box-shadow: 1px 4px 8px 1px rgba(0, 0, 0, 0.1);
  background: rgba(245, 245, 245, 0.3);
  border-radius: 1%;
  font-family: Roboto, sans-serif;
  font-size: 22px;
  padding: 10px;
}
```

---

<div class="post-metadata">

**Author:** ![brankaandreja](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/brankaandreja/32/50274_2.png) [@brankaandreja](https://forum.freecodecamp.org/u/brankaandreja)\
**Post date:** [April 30, 2017, 6:35pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/4 "2017-04-30T18:35:18Z")

</div>

Oh, and an afterthought. If you want to center your main

, you set it to a fixed width and the margin: auto; and it should center it self on the page .

---

<div class="post-metadata">

**Author:** ![gml133F](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gml133f/32/115216_2.png) [@gml133F](https://forum.freecodecamp.org/u/gml133F)\
**Post date:** [April 30, 2017, 6:43pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/5 "2017-04-30T18:43:19Z")

</div>

Thank you! I will add a fallback color. issue ended up being what imtoobose suggested, but it is still good practice to add it.

---

<div class="post-metadata">

**Author:** ![gml133F](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/gml133f/32/115216_2.png) [@gml133F](https://forum.freecodecamp.org/u/gml133F)\
**Post date:** [April 30, 2017, 6:44pm UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/6 "2017-04-30T18:44:26Z")

</div>

Thank you! I indeed copy pasted the rgba value from a color code generator. I retyped it and it worked!

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 11:33am UTC](https://forum.freecodecamp.org/t/solved-problem-with-div-background-color-in-css/110938/7 "2021-01-16T11:33:35Z")

</div>