Where is the background value coming from?

HI - I have a strange issue I can't seem to crack. On several WordPress sites using the same stack and template, I've made the navigation semi-transparent in order see the video behind the navigation. This works great on other sites, but a new site I'm building manages to place some kind of light grey backgrounded object behind the navigation, foiling the transparent effect.

I've placed the semi-transparent nav bar at half the correct height, which then displays what's going on. If I set the transparent nav bar to it's full, correct height value, there is a light grey background that I cannot locate the source of.

Right now I've placed the nav bar height at half the correct value. I also have a -68px margin-top value to give an idea of what I'm trying to do. However if the height and margin are both set to 135px and -135px respectively, it looks exactly right at page load, but the menu offset doesn't work once you scroll down the page.

At any rate, if I can just figure out how to "disable" that light grey, I can worry about the rest. Any idea what's going on here? Firebug is not helping.

Here is the staging area:


Bill HendersonWeb MarketingAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Steve BinkCommented:
See attached image for what I see in latest Chrome.

Latest Chrome
The div.x-navbar element has a specific height of 68px, but also margin-top:-68px.  However, the inner content is 135px...the grey area is where the other 67px is.  Since that inner content does not assign a background color, the body background color shows through.  If you put the green background on div.x-navbar-inner instead, that grey area becomes green.  Alternatively, setting div.x-navbar with height:135px (the height of the actual content it holds), the grey area is also covered.
Bill HendersonWeb MarketingAuthor Commented:
I'm sorry - I'm not being clear. I did that intentionally because "covering" the gray area is not the goal. That gray area shouldn't show up at all. But if I set the height and margin properly, my green band covers the gray - rather than being able to see through it. I've just set it back. If you notice, when scrolling, the top bar is semi-transparent, but at page load, at the top of the page, that gray bar is behind it. I agree that I thought it was the body background color, but why on earth is that coming through above the slider video?
Steve BinkCommented:
The gray area is there originally because it is the body's background color.  Where there is nothing else to render, the body shows through.  The half-height green bar with full height inner content created that space for the body to peek through the other content.

I did not see any gray at the top of the page during page load.  I'm guessing that its appearance is related to the video content not being available yet, so again, the body is visible.  

You have since changed the CSS, and I no longer see the gray area at all.  Is the site still exhibiting issues?  If so, perhaps a screen capture or video describing the problem may help.
Price Your IT Services for Profit

Managed service contracts are great - when they're making you money. Yes, you’re getting paid monthly, but is it actually profitable? Learn to calculate your hourly overhead burden so you can master your IT services pricing strategy.

Bill HendersonWeb MarketingAuthor Commented:
Steve the gray area is now preventing the semi-transparent green navigation bar from letting the bottom of the video through.

That's what I'm saying. The gray is there, behind the green bar currently. I changed the CSS back to what I thought it SHOULD be to have the nav bar correctly positioned above the bottom of the video, but semi-transparent.

Instead the gray bar is behind the nav bar still and it's blocking the bottom of the video entirely, which is why it confuses me that it's the body background that is doing this. I don't think that could be the case, could it?
Bill HendersonWeb MarketingAuthor Commented:
So the question is, what would you do with the current elements to be able to see through the green nav bar to the video playing behind it?
Steve BinkCommented:
Is the green bar supposed to be wholly over the video, or should it be half on/half off like it was originally?

FYI, the gray is not preventing translucency over the video.  The green bar is no longer positioned over the video.  If you remove the header element entirely, you'll the video is still there in its entirety.
Bill HendersonWeb MarketingAuthor Commented:
Hi Steve,

I promise you the green bar is over the video. If I inspect element, just like you said, and remove the entire header section, the green bar disappears and an extra inch of video at the bottom of my non-scrolled browser window is revealed. And I said it was half-on and half-off to demonstrate the gray bar and what it was doing. I made it like that in order to ask this question.

The green nav bar should appear at the bottom of the browser window, over the bottom inch or so of the video, and be semi-transparent, just like it is if you scroll down into the content.

Does that make sense?

So the question is, what would you do with the current elements to be able to see through the green nav bar to the video playing behind it?

I promise the video is playing behind it. The horse hoofs are there in the real video. If it makes a difference, I'm looking at full screen mode on a 1400px wide monitor.

Steve BinkCommented:
I have to disagree with you.  After inspecting the elements, there are several things going on here that make it difficult to pinpoint the cause.  One thing is clear - it has something to do with the JS used to build the video control.

If I refresh the page with my dev tools open, some of the containing elements are set to explicit heights which account for the size of the dev tools window.  So, refreshing with it open gives me full screen.  This sets the video at 830px, with the header at 135px.  

Actually, the *video* is set at 965px, but some other div elements just below it are set to 830px.  In combination with overflow:hidden on the video's container, that limits the ability of the video to extend to the header.  If I manually set those two divs to 965px, I see the effect you are trying to achieve.  Likewise if I remove the overflow:hidden.

You're going to need to learn a bit more about this video control you are using. I think.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Bill HendersonWeb MarketingAuthor Commented:
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.