Making text background transparent but not text itself

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!

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Adriano, Feb 27 '14 at 08:37

score 227 · Accepted Answer · answered Mar 16 '13 at 12:37

227

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.

answered Mar 16 '13 at 12:37

Karl-Johan Sjögren

16,544
7
59
68

1

Any idea how to achieve this with a background image? – Jujucat Mar 28 '20 at 18:23
1

For background images, just use a PNG or WEBP with an alpha channel as your image. – Karl-Johan Sjögren Mar 28 '20 at 21:45

James Coyle · Answer 2 · 2018-04-18T09:05:54.050

27

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.

edited Apr 18 '18 at 09:05

answered Mar 16 '13 at 12:37

James Coyle

9,922
1
40
48

Is there a link to more info about `background: transparent;`? I can't get it to work or find the docs for it. – Mote Zart Jan 10 '21 at 21:30

score 2 · Answer 3 · answered Mar 16 '13 at 12:38

2

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+

answered Mar 16 '13 at 12:38

FelipeAls

21,711
8
54
74

score 2 · Answer 4 · edited Jun 13 '22 at 02:29

2

Use alpha value instead of using opacity. See code below:

background: rgba(255,255,255,0.2);

edited Jun 13 '22 at 02:29

Robin V.

1,484
18
30

answered Jun 11 '22 at 00:24

Sachini Amarasinghe

45
5

1

This idea was already proposed, what is new? – Vega Jun 12 '22 at 08:01

score 0 · Answer 5 · edited Sep 25 '13 at 22:02

0

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

edited Sep 25 '13 at 22:02

Chris Kempen

9,491
5
40
52

answered Sep 25 '13 at 21:44

BL_

16
3

Gopika · Answer 6 · 2021-07-09T11:56:17.997

0

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;

edited Jul 09 '21 at 11:56

answered Jul 08 '21 at 08:03

Gopika

11
3

score 0 · Answer 7 · answered Aug 18 '21 at 12:00

0

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

answered Aug 18 '21 at 12:00

Hildermes José Medeiros Filho

56
1
4

Dusan Ferbas · Answer 8 · 2022-05-23T17:12:43.443

0

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

edited May 23 '22 at 17:12

answered May 12 '22 at 21:18

Dusan Ferbas

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – manpreet May 13 '22 at 11:39
I modified my answer. Please let me know, if it seems more clear now. – Dusan Ferbas May 23 '22 at 17:14

score -3 · Answer 9 · edited Aug 27 '18 at 07:03

-3

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

edited Aug 27 '18 at 07:03

Suraj Rao

29,388
11
94
103

answered Aug 27 '18 at 06:53

trulyignitin

1

Making text background transparent but not text itself

9 Answers9

Linked

Related