twilitegxa Posted August 30, 2011 Share Posted August 30, 2011 I am trying to set my gradient in FireFox, but I can't get it quite right! From the body area, it's supposed to go from red to white, then it's supposed to go from white to the blue where the little logos start, and end before the bottom nav area, although on Safari I couldn't get the nav bar outside of the blue, so if you look in Safari you can see what I'm trying to achieve. After the logos, it's supposed to go straight to white. Can anyone help me get my CSS right? Here is what I have: body { background: #ffffff; background: -moz-linear-gradient(top, white 16.45%, #546a93 10%, #de4d20 20%, white 80%, #566991 85%, white 85%); background: -webkit-gradient(linear, 0 218, 0 100%, from(white), color-stop(0%, #546a93), color-stop(4%, #de4d20), color-stop(30%, white), color-stop(70%, white), color-stop(90%, #566991), color-stop(90%, white), to(white)); } The site can be viewed at: http://lhdairconditioning.com.au/ Any help would be greatly appreciated! Quote Link to comment https://forums.phpfreaks.com/topic/246052-css-gradient-in-firefox/ Share on other sites More sharing options...
sunfighter Posted August 30, 2011 Share Posted August 30, 2011 I have had a problem with linear-gradient in the body tag before. I started putting it in a div that is the body ... like this: <style type="text/css"> #container { background: #ffffff; background: -moz-linear-gradient(top, white 16.45%, #546a93 10%, #de4d20 20%, white 80%, #566991 85%, white 85%); background: -webkit-gradient(linear, 0 218, 0 100%, from(white), color-stop(0%, #546a93), color-stop(4%, #de4d20), color-stop(30%, white), color-stop(70%, white), color-stop(90%, #566991), color-stop(90%, white), to(white)); } </style> <body > <div id="container"> </div> </body> I haven't checked this but it might help you getting started. Quote Link to comment https://forums.phpfreaks.com/topic/246052-css-gradient-in-firefox/#findComment-1263659 Share on other sites More sharing options...
cssfreakie Posted August 31, 2011 Share Posted August 31, 2011 I am trying to set my gradient in FireFox, but I can't get it quite right! From the body area, it's supposed to go from red to white, then it's supposed to go from white to the blue where the little logos start, and end before the bottom nav area, although on Safari I couldn't get the nav bar outside of the blue, so if you look in Safari you can see what I'm trying to achieve. After the logos, it's supposed to go straight to white. Can anyone help me get my CSS right? Here is what I have: body { background: #ffffff; background: -moz-linear-gradient(top, white 16.45%, #546a93 10%, #de4d20 20%, white 80%, #566991 85%, white 85%); background: -webkit-gradient(linear, 0 218, 0 100%, from(white), color-stop(0%, #546a93), color-stop(4%, #de4d20), color-stop(30%, white), color-stop(70%, white), color-stop(90%, #566991), color-stop(90%, white), to(white)); } The site can be viewed at: http://lhdairconditioning.com.au/ Any help would be greatly appreciated! try: background: -moz-linear-gradient(center top , white 16.45%, #fff 10%, #DE4D20 20%, white 80%, #566991 85%, white 85%) repeat scroll 0 0 transparent just a small thing, don't use 3 different colors in your gradient it's 2011 Quote Link to comment https://forums.phpfreaks.com/topic/246052-css-gradient-in-firefox/#findComment-1264058 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.