PDA

View Full Version : Semi Transparent Page Background

JPetrillo
05-01-2009, 05:25 PM
I want to make the "Page Background" semi transparent. Is this easy? If so, how can I do it?

Thanks!
UKBusinessLive
05-02-2009, 06:57 AM
I want to make the "Page Background" semi transparent. Is this easy? If so, how can I do it?

Thanks!

I've found out a bit about it for you, you can add inside either a table tag, or the body tag, even a div tag and the actual "iframe" tag, you can add this css style that makes each of those properties semi transparent. and it would look something like this:

<body style="filter: alpha (opacity=50)">

In here, the entire body of the html will be given an opacity, ranging from 0 to 100. 0 being completely transparent, and 100 being not transparent at all. and 50 being somewhere in the midde hence, semi transparency. its a really neat effect.

The down side to this, is tha it makes all of the content in the body transparent as well. as in the text, and any images or whatever i might have on the page. whether i apply this style in the body tag, the ifram tag, or a div tag. its all the same.


The other option i have found available to me is one that makes a table or iframe transparent, BUT not the content, (like the text). however what i don't like about this options is that it makes the iframe COMPLETELY see through. and i only want it SEMI- see through. semi transparent. this code works like this.

in the ifram tag <iframe src="blahblah.htm"></iframe> you would put this inside it like so:

<iframe src="blahblah.htm" allowtransparency="true">


and then in the actually html file tha you want IN the iframe, you would put this int he body tag:

<body style="background-color: transparent;">
JPetrillo
05-02-2009, 05:14 PM
So how do I make just the Page Background semi transparent?

I was also able to get semi transparency simply by putting opacity: 0.5; in the "Extra CSS Attributes" box under "Page Background" in the Style Manager, but like you said, this makes the entire page including all the content semi transparent.

There has to be a way to make only the actual Page Background semi transparent and keep all the content on top of that normal looking! (without using a .png image)

Anymore ideas anyone?
Regs
05-02-2009, 08:18 PM
Why are you adverse to the use of a .png?
JPetrillo
05-02-2009, 10:24 PM
Because I read it doesn't work with all browsers.
napy8gen
05-03-2009, 03:08 PM
You can define new css class in main css>additional css definition.
.transparent{
filter: alpha(opacity=70); /* ie */
-moz-opacity: .7; /* mozilla */ }

apply it to any layout wrapper in the header template. that depends on your design code.
style manager> style namer> common templates> header

if in the header template the design start with table, you can call the class like this.
<table class="transparent">

if start with div
<div class="transparent">


In Main CSS page background property empty it or put value "transparent".
JPetrillo
05-03-2009, 04:13 PM
Thanks napy

What template would I use to call the class? I dont want the header transparent. I am using a white page background and I want the white page background to be semi transparent.
napy8gen
05-04-2009, 04:17 PM
because Page Background property cannot hold this tranparent class because it makes all content transparent. you need to empty the Page Background css and put the white in the tranparent class.
.transparent{
background-color:#FFFFFF;
filter: alpha(opacity=70); /* ie */
-moz-opacity: .7; /* mozilla */ }

then maybe you can make a simple <div class="transparent"></div>

put the <div class="transparent"> in the bottom of header template before this comment <!-- content table -->

and the close div tag </div> in the footer template on top of the footer template.

*but remember to empty the background color of Page Background property in your style Main CSS. or put the value "transparent"
JPetrillo
05-04-2009, 06:42 PM
Thanks again napy :)

I did exactly as you said and it worked, but all the content was transparent and not just the background :(

Seems like we're getting closer to a solution though... any other thoughts?
iogames
05-04-2009, 06:52 PM
need this too! :eek:
napy8gen
05-05-2009, 01:09 AM
If we declare transparent class in main css like my method above and apply to certain template only like the navbar template you can get separate transparent-only navbar tranparent..but if you apply to background or page background you will get the whole forum in transparent mode.

I think the last solution for you is to use transparent png and called it as background in Page Background property
iogames
05-05-2009, 04:53 PM
I know that solution! http://chat.iogames.com/administrators-moderators/140-im-xbox-360-a.html

but there's not another one? :(