Revisions to How do I reduce the opacity of an element's background using CSS?

added 12 characters in body

edited May 31, 2020 at 17:57

5.6k
5
45
78

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome, and Internet Explorer as far as I can see.

Put a container DIVdiv and two child DIVs inchildren divs at the same level, one for content, one for the background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br/>Background should grow to fit. </div> <div class="background"></div> </div>

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br/>Background should grow to fit. </div> <div class="background"></div> </div>

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome, and Internet Explorer as far as I can see.

Put a container div and two children divs at the same level, one for content, one for the background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br/>Background should grow to fit. </div> <div class="background"></div> </div>

removed unecessary indents on css styles.

Source Link

edit approved Jun 10, 2019 at 11:45

codeherk

1.7k
16
24

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

 .container {   position: relative;  }  .content {   position: relative;   color: White;   z-index: 5;  }  .background {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   background-color: Black;   z-index: 1;   /* These three lines are for transparency in all browsers. */   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   filter: alpha(opacity=50);   opacity: .5;  }

<div class="container"> <div class="content"> Here is the content. <br />Background should grow to fit. </div> <div class="background"></div> </div>

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

 .container {   position: relative;  }  .content {   position: relative;   color: White;   z-index: 5;  }  .background {   position: absolute;   top: 0px;   left: 0px;   width: 100%;   height: 100%;   background-color: Black;   z-index: 1;   /* These three lines are for transparency in all browsers. */   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";   filter: alpha(opacity=50);   opacity: .5;  }

<div class="container"> <div class="content"> Here is the content. <br />Background should grow to fit. </div> <div class="background"></div> </div>

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

.container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br/>Background should grow to fit. </div> <div class="background"></div> </div>

Addeded code snippet so people can view it running.

Source Link

edit approved Mar 30, 2015 at 20:45

Ruslan López

4.5k
2
30
40

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background:

<div class="container"> <div class="content"> Here is the content. <br /> Background should grow to fit. </div> <div class="background"></div> </div>

And. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

 .container { position:relative; } .content { position:relative; color:White; z-index:5; } .background { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:Black; z-index:1; /* These three lines are for transparency in all browsers. */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; }

 .container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br />Background should grow to fit. </div> <div class="background"></div> </div>

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background:

<div class="container"> <div class="content"> Here is the content. <br /> Background should grow to fit. </div> <div class="background"></div> </div>

And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

 .container { position:relative; } .content { position:relative; color:White; z-index:5; } .background { position:absolute; top:0px; left:0px; width:100%; height:100%; background-color:Black; z-index:1; /* These three lines are for transparency in all browsers. */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity:.5; }

This is the best solution I could come up with, NOT using CSS 3. And it works great on Firefox, Chrome and Internet Explorer as far as I can see.

Put a container DIV and two child DIVs in the same level, one for content, one for background. And using CSS, auto-size the background to fit the content and put the background actually in the back using z-index.

 .container { position: relative; } .content { position: relative; color: White; z-index: 5; } .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: Black; z-index: 1; /* These three lines are for transparency in all browsers. */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); opacity: .5; }

<div class="container"> <div class="content"> Here is the content. <br />Background should grow to fit. </div> <div class="background"></div> </div>

Added Syntax highlighting for code

Source Link

edit approved Jul 24, 2013 at 13:47

Hemerson Varela

26.1k
18
73
69

Loading

deleted 51 characters in body

Source Link

edited Nov 8, 2011 at 15:58

Yi Jiang

50.2k
16
139
137

Loading

added 23 characters in body

Source Link

edited May 25, 2011 at 11:26

Peter Mortensen

31.4k
22
110
134

Loading

Source Link

answered Jul 13, 2010 at 20:51

Görkem Paçacı

1.8k
1
11
10

Loading

Collectives™ on Stack Overflow

Return to Answer