Jump to content
frygurl

Css Gradient Background

Recommended Posts

frygurl    0
frygurl

I would like a site I'm working on to have a simple linear gradient that scales. I found CSS gradient generators online, but when I paste the custom CSS - nothing changes. Here is an example of the code I am using:

 

 

background: linear-gradient(to bottom,  #ffffff 0%,#91e9e2 100%);
 
 
I would appreciate help with this! Thanks so much.
 
 

Share this post


Link to post
Share on other sites
batman    389
batman

Hi

First you try with

background: linear-gradient {YOUR CODE;}

This is the format 


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
frygurl    0
frygurl

Thanks for pointing that out. I changed the code, but it still doesn't work. Has anyone done this successfully? 

Share this post


Link to post
Share on other sites
James B    436
James B

Which area are you apply the code to? What is the gradient being used to color? You'd need to use firebug to find the selector of the item you're intending to adjust and apply your code. Such as below, #nav is the item being adjusted.

 

#nav {background:#ffffff;} 

If you need more info on css check out http://www.w3schools.com/css/default.asp

 

You can download firebug from www.getfirebug.com


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
frygurl    0
frygurl

I want to apply the gradient to the main page background. I've used firebug and tried this, but no luck:

 

#page-canvas {background: linear-gradient{to bottom,  #ffffff 0%,#91e9e2 100%;}

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there, depending on the setup of your site it will either be .canvas or .page-canvas (not #page-canvas as its a class so needs a .before).

 

Also gradients have different codes for different browsers, so you'll need to make sure you accommodate them all

 

.gradient-bg {
   /* fallback/image non-cover color */
   background-color: #1a82f7; 

   /* fallback image */
   background-image: url(images/fallback-gradient.png); 

   /* Safari 4+, Chrome 1-9 */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2F2727), to(#1a82f7));

   /* Safari 5.1+, Mobile Safari, Chrome 10+ */
   background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7); 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
 
   /* IE 10+ */
   background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
}

More info can be found here - http://css-tricks.com/css3-gradients/

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
frygurl    0
frygurl

Thank you. I'm still having trouble with this, but I think I'm on the right track. I'll keep working on it. 

Share this post


Link to post
Share on other sites
Rob    547
Rob

I think the issue is that PlatformPro doesn't use CSS3 or HTML5.  As a result, style code in CSS3 will likely not work properly. Legacy products using gradients such as iBlogPro4 used graphic backgrounds, not CSS.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×