CODEWITHSUNDEEP
csshtmlopacity
GAMIE64
GAMIE64

Reputation: 5

Image in header opaque

still busy to learn HTML5 and CSS for my school project. But got a question and i'm stumped.

The image and links i have in my nav bar, the face with text, gets transparent. Even though it's not in the same div, nor class as the header itself, which has an opacity value.

the post is, the image AND links should be completely visible, and on TOP of that background opacity.

In advance, sorry for the probably shoddy coding and naming of classes.

Here's the links: actual site html/css

Upvotes: 0

Views: 231

Answers (2)

gwistix
gwistix

Reputation: 60

I agree that the essential problem is that you have one div nested inside another.

Although your .flub class has its opacity set to 1.0, the only div it applies to is inside a .header div, with an opacity of 0.7. So your .flub div is displaying with 100% of the available capacity, which is only 70% due to it being nested within your .header div (which is set to 70% opacity). Consider setting the opacity of the other elements separately, rather than setting the opacity of the entire .header div.

Upvotes: 0

urz0r
urz0r

Reputation: 462

your header div has opacity set to 0.7 so that results in everything inside it being semi transparent.

if you want only your header background to be transparent, you can either add the transparency directly to your header background-image. or you could use an rgba background color, if your header background should be a semi transparent specific color. (http://css-tricks.com/rgba-browser-support/)

if all of that doesn't suit your needs, you could always get fancy with something like shown in here: http://css-tricks.com/snippets/css/transparent-background-images/

Upvotes: 1

Related Questions