set a gradient background?

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/16/2009 6:21:52 PM
Gravatar
Total Posts 3

set a gradient background?

Is there a way to set a gradient background on the page?

The gradient I am trying to do is like that blue backround gradient on Microsoft's site: www.microsoft.com/en/us/default.aspx

I first tried to create a narrow .gif with a gradient -- and adding it's background-image reference here,

stylecolors.css in .pagebody{ background-url ; }   (playing with the height values, i.e. : 100%)

but the image just tiles down (instead of stretching down the page)

Then I saw that for IE, I could use filters, such as this, 

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ccffcc', startColorstr='#FFFFFF', gradientType='0');"></body>

But I don't see how this works inside mojoportal.  Is it somthing in stylelayout.css?

 

2/18/2009 6:24:41 PM
Gravatar
Total Posts 30

Re: set a gradient background?

Hi,

   I'm not sure if you have tried putting additional properties on your background css tag , like this :

background:url(whatever_bg.png) repeat-x top left; this should be changed on your skin folder under "Data/Sites/(site number)/skins/(name of skins) what you want to change is the StyleLayout.css and not the Stylecolor.css.

If you are having issues with height you can do {overflow:visible} on your css.

 

hope this helps,

-gil

4/23/2009 2:31:42 AM
Gravatar
Total Posts 15
Growing old is inevitable, growing up is optional :)

Re: set a gradient background?

Hi,

if you want cross platform solution and let say you want gradient from white (#ffffff) to black (#000000) vertical then you should:
make image file 1x500 (if you want your gradiend to end after 500px) and set your body in css like:
body
{
  background:url(whatever_bg.png);
  background-repeat: repeat-x;
  background-color: #000000;
}

You should set background-color on ending gradient color for complete page to look like extension of gradient image.

Hope this helps
Goran
 

You must sign in to post in the forums. This thread is closed to new posts.