Archived

This topic is now archived and is closed to further replies.

  • 0

Css Gradient Background

Question

Posted · Report post

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

7 answers to this question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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/

1 person likes this

Share this post


Link to post
Share on other sites

Posted · Report post

Hi

First you try with

background: linear-gradient {YOUR CODE;}

This is the format 

Share this post


Link to post
Share on other sites

Posted · Report post

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

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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