Using Opacity for the background alone?

Get Started
1

Hi
Im creating a mybb theme, i have avast knowledge in Web designing but for some crazy reason i stopped and im trying to remember what i knew (Havent done it in a year).

I want the background of a container to be a certain color. Lets say blue. I want to increase the opacity of this blue by 50%. When i do that i simply get the whole theme to go into opacity by 50% when really all i want is the blue container background. How can i fix this?

Actually what im trying to achieve is have a transparent background for the container so if you’d like to help me do that i’d appreciate it since i cant remember how.

This is the container code


#container {
	background: #4f4e4e;
	width: 90%;
	color: #000000;
	border: 5px solid #246cb0;
	margin: auto auto;
	padding: 20px;
	text-align: left;
	
	font-weight: bold;
}

\

Please message me ASAP if possible thank you :smiley: have a wonderful day

i want the clear transparent the image has

2

:: channels grumpy cat:: NO!

Opacity just doesnt work that way.

Am using percentages as a conceptual tool, not the actual value string… hope you are able to follow my logic on this.
Consider it as a variable; if you give the container “50%” opacity, then ‘100%’ opacity will calculate to 50%. Opacity, unlike font-size, cannot be greater than “100%” ( it wouldn’t make sense anyway… what’s MORE THAN FULLY OPAQUE? )

That kinda leaves you with 3 choices:

  1. a transparent PNG ( this is if you are looking for widest browser support)
  2. the “transparency” you are trying to achieve is of a solid color, background: RGBA(r,g,b,a); works extremely well. Actually, for supporting browsers, this can be used for gradients as well.
  3. If you MUST have a complex semi transparent BG, you could still use transparency ( see, it’s not an entirely useless property) by using a pseudo element ( :before, :after),absolute position, and a negative z-index ( OR you could relative position the children and give THEM a higher z-index).
    to get the pseudo element to cover the entire element , regardless of it’s dimensions, use: top:0; bottom:0; left:0; right:0;

hope that helps

3

thank you for your vivid detail but im presumming that i’ll simply use a solid png and create a more transparent image. hopefully i can achieve this easily.