Making text background transparent but not text itself - html

Question

So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:
#charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #42413C;
margin: 0;
padding: 0;
color: #000;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15px;
padding-left: 15px;
opacity:1;
}
a img {
border: none;
}
a:link {
color: #42413C;
text-decoration: underline;
}
a:visited {
color: #6E6C64;
text-decoration: underline;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
.container {
width: 750px;
margin: 0 auto;
}
.content {
padding:20px;
width:710px;
position:relative;
background:#CCC;
opacity: 0.5;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.header {
top:0%;
width: 750px;
height: 200px;
background-image: url(images/header.png);
background-repeat:no-repeat;
background-position:center;
}
.navbar {
height: 50px;
width: 750px;
position: relative;
z-index: 2;
}
#bg {
position: fixed;
top: 25%;
left: 15%;
z-index: -1;
}
div {
display: block;
}
Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.php
Thank you!

Answer 1

Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.
.content {
padding:20px;
width:710px;
position:relative;
background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
background: rgba(204, 204, 204, 0.5);
}
See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.

Answer 2

For a fully transparent background use:
background: transparent;
Otherwise for a semi-transparent color fill use:
background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)
where the values are:
background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)
You can also use rgba values for gradient backgrounds.
To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.

Answer 3

opacity will make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba() value for example. Works on IE8+

Answer 4

Use alpha value instead of using opacity. See code below:
background: rgba(255,255,255,0.2);

Answer 5

If you use RGBA for modern browsers you don't need let older IEs use only the non-transparent version of the given color with RGB.
If you don't stick to CSS-only solutions, give CSS3PIE a try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}

Answer 6

To make the background of your body transparent please try this style, it worked for me, add "ad" at the end of your desired color code
background-color: #42413Cad !important;

Answer 7

I would add Hex color code for transparency
background-color: #42413C+hexcode
https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4
It would be somethin like this:
background-color: #42413C2E
It is equal to that color + 18% alpha

Answer 8

I found a way with z-index.
The watermark class (you can use an example from #19531361) does the job. All input tags are non transparent, but they sit "behind" the watermark. To make them active, use following css modifications (inputs are then "on top").
input {
position:relative;
z-index:10;
}
.watermark {
position: absolute;
opacity: 25%;
z-index:0;
}

Answer 9

box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);