Viewing Thread:
"Skyscraper transparency - Is it possible?"

Hi there,

I would like to make the background of my skyscraper transparent. Is this possible?

I want to do this as my banner stretches across the entire of the top of the screen and is therefore occluded by the skyscraper that drops down in front of it.

I have read this specific tutorial, but cannot see how or where the code would go into the skyscraper's HTML.

I'm not particularly HTML-savvy, but I work in an analytical field and generally pick things up easily enough.

My current HTML code is below. Can anyone show me how I would add transparency - especially given that I cannot see the background colour being defined in the current code?


<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>In this section</p>


Many thanks for anybody;s help.

W

I have a semi-transparent background in a site

http://www.castleperry.co.uk/

if you use firebug you can see how the html + css works.

I know this works in ie7 + and the other major browsers:

this is the relevant html:
~~~~~~~~~~~~~~~~~~~


this is the relevant css
~~~~~~~~~~~~~~~~~~
#background {
height: 80%;
left: 0;
min-height: 500px;
opacity: 0.15;
position: absolute;
text-align: center;
top: 6em;
width: 100%;
z-index: -1;
}

.stretch {
height: 100%;
margin: auto;
width: 100%;
}

Hi Hmmm,

Thanks for your considered response. I think, based on the complexity of what I was trying to achieve, that I'll adjust the design of my site.

I'm now having a slightly irritating problem with the skyscraper manager... alas, that's for another thread.

Thanks,
W

Hi socrates and welcome to the Freeola Forums! :¬)

I'm a little confused with what you are try to achieve here...
I don't normally use Skyscrapers (as they spoil my site's width and placement) but have added one to a test page: skyscraper testing

I thought the Skyscraper Manager only allowed left or right placement? So for me the Skyscraper is always to one side of my banner which means you won't be able to do what you are trying to? Unless you've found an InstantPro theme that places things differently?

Are you able to link to your site?

As the tutorial you link to points out using CSS for this may not be reliable across all browsers - something to think about...

Have you tried using a transparent graphic in your Skyscraper to get the look you are after?

EDIT:
Using this code will add opacity:
<p style="background-color: #cccccc; opacity: 0.5;">test</p>
- but it isn't compatible with all browsers.

[s]Hmmm...[/s]

Hi there,

I would like to make the background of my skyscraper transparent. Is this possible?

I want to do this as my banner stretches across the entire of the top of the screen and is therefore occluded by the skyscraper that drops down in front of it.

I have read this specific tutorial, but cannot see how or where the code would go into the skyscraper's HTML.

I'm not particularly HTML-savvy, but I work in an analytical field and generally pick things up easily enough.

My current HTML code is below. Can anyone show me how I would add transparency - especially given that I cannot see the background colour being defined in the current code?


<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>�</p>
<p>In this section</p>


Many thanks for anybody;s help.

W