(Locked) Make a background semi-transparent?


#1

Hi Guys and as always, TIA for reading this and offering your expertise. I’m not a programmer and so your help is much appreciated.

What’s the best way to make a background semi-transparent? I have a plugin called transify but don’t know how to use it and it’s supposed to be friendly for many different browsers.

The theme I am using is Royalty, purchased here. I want main background color to be transparent so that the chosen background image will be visible.

THANKS!


#2

css can do this, code below:

#div_id {
 opacity:0.4;
 filter:alpha(opacity=40);
}

opacity:x is used for browsers such as Firefox, Opera, safari and chrome
Filter:alpha is used for IE browsers

The opacity can go from 0 to 1.0, and the filter:alpha can go from 0 to 100.

If you have 0.6 for opacity, the filter alpha should be 60.

More info at http://www.w3schools.com/css/css_image_transparency.asp


#3
Gareth_Gillman said

css can do this, code below:

#div_id {
 opacity:0.4;
 filter:alpha(opacity=40);
}

opacity:x is used for browsers such as Firefox, Opera, safari and chrome
Filter:alpha is used for IE browsers

The opacity can go from 0 to 1.0, and the filter:alpha can go from 0 to 100.

If you have 0.6 for opacity, the filter alpha should be 60.

More info at http://www.w3schools.com/css/css_image_transparency.asp

Hey there! Thanks so much.

I added that to my css but now its just a opaque for the entire page, not the area that I wanted. :frowning: What I did was below and most likely I did it incorrectly. What did I do wrong?

body {
background:#3c3c3c;
color:#fff;
opacity:0.4;
filter:alpha(opacity=40);
}


#4

This is what you want:

Use this http://www.javascripter.net/faq/hextorgb.htm to make the RGB value

and then for your code:

background: rgba(60 , 60 , 60 , .4);

All there is to it. It’s very modern! :slight_smile:


#5
j18 said
Gareth_Gillman said

css can do this, code below:

#div_id {
 opacity:0.4;
 filter:alpha(opacity=40);
}

opacity:x is used for browsers such as Firefox, Opera, safari and chrome
Filter:alpha is used for IE browsers

The opacity can go from 0 to 1.0, and the filter:alpha can go from 0 to 100.

If you have 0.6 for opacity, the filter alpha should be 60.

More info at http://www.w3schools.com/css/css_image_transparency.asp

Hey there! Thanks so much.

I added that to my css but now its just a opaque for the entire page, not the area that I wanted. :frowning: What I did was below and most likely I did it incorrectly. What did I do wrong?

body {
background:#3c3c3c;
color:#fff;
opacity:0.4;
filter:alpha(opacity=40);
}

If you only want a part of the background transparent then it would need to be done via a div, and place the div where you want it to show.


#6
j18 said
Gareth_Gillman said

css can do this, code below:

#div_id {
 opacity:0.4;
 filter:alpha(opacity=40);
}

opacity:x is used for browsers such as Firefox, Opera, safari and chrome
Filter:alpha is used for IE browsers

The opacity can go from 0 to 1.0, and the filter:alpha can go from 0 to 100.

If you have 0.6 for opacity, the filter alpha should be 60.

More info at http://www.w3schools.com/css/css_image_transparency.asp

Hey there! Thanks so much.

I added that to my css but now its just a opaque for the entire page, not the area that I wanted. :frowning: What I did was below and most likely I did it incorrectly. What did I do wrong?

body {
background:#3c3c3c;
color:#fff;
opacity:0.4;
filter:alpha(opacity=40);
}

If you only want a part of the background transparent then it would need to be done via a div, and place the div where you want it to show.


#7
Gareth_Gillman said
j18 said
Gareth_Gillman said

css can do this, code below:

#div_id {
 opacity:0.4;
 filter:alpha(opacity=40);
}

opacity:x is used for browsers such as Firefox, Opera, safari and chrome
Filter:alpha is used for IE browsers

The opacity can go from 0 to 1.0, and the filter:alpha can go from 0 to 100.

If you have 0.6 for opacity, the filter alpha should be 60.

More info at http://www.w3schools.com/css/css_image_transparency.asp

Hey there! Thanks so much.

I added that to my css but now its just a opaque for the entire page, not the area that I wanted. :frowning: What I did was below and most likely I did it incorrectly. What did I do wrong?

body {
background:#3c3c3c;
color:#fff;
opacity:0.4;
filter:alpha(opacity=40);
}

If you only want a part of the background transparent then it would need to be done via a div, and place the div where you want it to show.

Ah okay, I see the logic but unsure of where to place and edit code.

If part of my background that I want to be transparent (the color #3c3c3c above) was in the body css code, where do I indicate elsewhere that is in a new div (after putting that new div code in the css, that is)?


#8

I am guessing you are using a background with an image that moves into a set colour, and you want to make that colour transparent? Unfortunately there is no easy way to do that unless you use divs, but that would need some imaginative coding.

I would create the image with the transparent text unless I have this wrong, if you want to send me a message with the website I will take a look.


#9
Gareth_Gillman said

I am guessing you are using a background with an image that moves into a set colour, and you want to make that colour transparent? Unfortunately there is no easy way to do that unless you use divs, but that would need some imaginative coding.

I would create the image with the transparent text unless I have this wrong, if you want to send me a message with the website I will take a look.

I may be making this more complicated than necessary since I’m not a code expert lol. But if you can send me your email address that would be wonderful.


#10

gillman56 [at] gmail

There is always a way to do what you want but it can get complicated


#11
Gareth_Gillman said

gillman56 [at] gmail

There is always a way to do what you want but it can get complicated

Sent you an email! :slight_smile:


#12

Any other suggestions for methods on achieving this would be greatly appreciated


#13
Pressateers said

This is what you want:

Use this http://www.javascripter.net/faq/hextorgb.htm to make the RGB value

and then for your code:

background: rgba(60 , 60 , 60 , .4);

All there is to it. It’s very modern! :slight_smile:

Hi and thanks! I tried this but it didn’t work in IE9 (it did work in the latest Chrome). Any other suggestions?


#14

Well, I assume you’re trying to cover the entire background. To do this, you’ll need to add a background div just after your body tag, like this:

 

the non-breaking space is there to make sure all browsers render it; Anyways, in the CSS you want it like this:

#background {
background-color: #3e3e3e;
width: 100%;
height: 100%;
position: fixed;
top: 0;
text-indent: -999em;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";

  /* IE 5-7 */
  filter: alpha(opacity=40);

  /* Netscape */
  -moz-opacity: 0.4;

  /* Safari 1.x */
  -khtml-opacity: 0.4;

  /* Good browsers */
  opacity: 0.4;
}

#15
Pressateers said

Well, I assume you’re trying to cover the entire background. To do this, you’ll need to add a background div just after your body tag, like this:

 

Thanks so much!

Also, my theme allows each page to have an uploaded background photo/image. It shows up on top, then there’s a gray background below see link (bit. ly/lCY1ve)

I wanted to make that gray part semi-transparent and to show the image behind it.

Questions:

  • After placing the CSS code, in which file do I place
     
  • How would I make the that other background photo stretch to fill the whole screen?
  • How would I be able to make that gray box not stretch full width?

#16

Hi,

you’d add it in header.php, most likely.

just change the width to whatever you like.

The background image would need to use background-size, which is CSS3, and it would only work in modern browsers.


#17
Pressateers said

Hi,

you’d add it in header.php, most likely.

just change the width to whatever you like.

The background image would need to use background-size, which is CSS3, and it would only work in modern browsers.

Thanks, I’ve edited it and I think it worked but I need to stretch the bg image size first to see, using the css3. Do you know how I would do that? Each page has an option to upload different bg image per page…

Also, the gray part seems to be moving around and not fixed in place even though the CSS code says fixed


#18

In my page.php: here’s the code, and I would like to have each background image stretch to most of the full height of the page. How can I do this

   <?php 
					if ($page_picture) { ?>
	                                            
					<?php } elseif ( $page_picture = get_option('of_topimg_general') ) { ?>
						                                            
                    <?php } ?>    

#19

#20