The menu button backgrounds are overridden by page image background, how do I prevent this?

Are you sure the buttons don't just look grey when there's no background image as opacity is so low.

Up vote 1 down vote favorite share g+ share fb share tw.

After applying a background image to the body, the menu buttons backgrounds are overridden as seen below. I want the menu buttons to preserve their visibility. Link to image is below

Title My MVC Application @Html. Partial("_LogOnPartial") @Html. ActionLink("Home", "Index", "Home") @Html.

ActionLink("About", "About", "Home") @RenderBody() /*******body***********/ body { font-size: .85em; font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0; background-image:url('/Content/bw. Jpg'); } /*******menu**********/ #menu { position:relative; float:left; clear:left; margin-right:50px; } #menu li { list-style-type: none; padding: 0px; display: block; width:150px; overflow:visible; } #menu li a { overflow:visible; background: rgba(0,0,0,0.2); text-shadow: 0px 0px 1px white; color: white; text-decoration: none; font-size: 13px; display: block; font-family: arial; text-transform: uppercase; text-shadow: 0px 0px 5px #eee; padding:10px 20px 10px; margin: 5px; font-weight: bold; letter-spacing: 1px; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); -moz-box-shadow: 2px 3px 3px rgba(0,0,0,0.6); box-shadow: 2px 3px 3px rgba(0,0,0,0.6); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } #menu li a:hover { opacity: 1; color:White; background:#FF00D0 ; text-shadow: 0px 0px 1px #ffffff; -webkit-transform: scale(1.1); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } #menu li a:active { background: rgba(0,0,0,0.1); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: 1px 1px 1px rgba(0,0,0,0.4); } html css link|improve this question edited Dec 21 '11 at 11:01BoltClock's a Unicorn?101k14145376 asked Dec 15 '11 at 17:30farhad5516 100% accept rate.

Are you sure the buttons don't just look grey when there's no background image as opacity is so low. When you then apply the background image you cant see the buttons background colour as the the opacity is so low and the background colour so strong. Temporarily update #menu li a and see if the problem still exists.

Background: #FF0000; Example here: benjaminhopkins.co.uk/BGLostExample.html.

– farhad Dec 15 '11 at 19:45 You will have to tweak the background value to make them show but should be easy enough. If you don't need them have any opacity change the background to #CCC or if you do try rgba(210,210,210,0.8) – benni_mac_b Dec 15 '11 at 20:17 1 +1 nice find, benny! – ptriek Dec 15 '11 at 21:00.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.