PDA

View Full Version : Video Transparency


Melody
11-27-2012, 03:01 PM
I have uploaded a YouTube video to a transparent content area...which has made the video (and text) on that page transparent as well.

I did quit a bit of research yesterday trying to get it fixed but I must not be using the right wording in my css and html. Could you all help me?

What I want is to have SOLID text/images/video on top of my transparent content area.

I am new to this so please know I would appreciate "layman's terms" and won't take offense at all to your making it simple.

Thank you for your time. It is greatly appreciated!!

Melody

Melody
11-27-2012, 03:44 PM
I don't know if this is important (and if it is...I should have shared it before).

I'm using Dreamweaver to do this site.

The background image is a fixed full screen image.

I have an image header with horizontal menu below.

The transparent content area follows. Background color is #666666 with opacity of 0.746. Width is 1000 px.

Thank you.

Melody

domedia
11-27-2012, 03:51 PM
Hi Melody, we need to see the site to see what's going on.

Melody
11-27-2012, 05:12 PM
We don't have it uploaded yet.

He has goDaddy hosting but we've not done any uploading.

I'm sorry!!

I did think about that (when asking), and I could tack it onto the back of my own site...just didn't want to mess things up in the process.

Melody

Melody
11-27-2012, 05:18 PM
Let me do that for you. (If I can.) Give me just a few minutes.

Melody
11-27-2012, 05:50 PM
Here is the site so far.
http://pointheavenwardsiamese.com/SinisterCraft/home.php

I appreciate you even being willing to look at it (help me).

Thank you.

Melody
11-27-2012, 05:59 PM
I've tried several things. Different code from different folks. There's LOTS out there.

Here's another I found this morning (from Dreamweaver)...and tried. Couldn't get it to work either.

http://www.dreamweaverresources.com/tutorials/background-transparent/index.html

And the code for it: view-source:http://www.dreamweaverresources.com/tutorials/background-transparent/index.html

I know I'm not doing something right...not laying/separating it right...I just don't know what.

Thank you for your help.

domedia
11-27-2012, 06:47 PM
remove the opacity property from your CSS all together. It's doing exactly what you';re telling it to do, and you're not liking it 8).

So here is your current CSS rule for .content
.content {
display: block;
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #666666;
opacity: 0.746;
position: relative;
}

Change this to:
.content {
display: block;
width: 1000px;
margin-left: auto;
margin-right: auto;
background-color: #666666; /* for older browsers */
background-color: rgba(102, 102, 102, .75); /* for newer browsers */
position: relative;
}

That's all you need to do (plus you need to start learning HTML and CSS ;-) )

.

Melody
11-27-2012, 06:52 PM
Oh my GOODNESS...that is AWESOME!!

And YES...I surely DO need to learn html and css. Yeeep!

Thank you!

Thank you, thank you!!