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

1

Hi!

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!

2

Hi

Here goes my point of view :slight_smile:

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 :slight_smile:
Branka

3

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;
}
4

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 .
5

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

6

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