Trying to create a gradient background

J

jeanm

Member
I'm trying to create a background that changes from light to dark. I found this on another web site:

...........In addition, you must select one light color and another color that is several shades lighter in order for this HTML gradient background effect to display properly.

This effect can be used for your entire web page background, or within your table cells.
To use the gradient effect as your web page background, use the following BODY tag:

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

When I apply this I only get a white background. Can anyone see if there is an error in the coding please?
 
B

BradT81

New Member
Create the gradient in photoshop, slice it thin vertically , set it to your body div repeating horizontal..
 
L

LouTheDesigner

New Member
BradT81 said:
Create the gradient in photoshop, slice it thin vertically , set it to your body div repeating horizontal..
Click to expand...

Exactly... The CSS should look like this:

Code: 
body
{
background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;
}

-Lou
 
J

jeanm

Member
Problem is I haven't got Photoshop hence my interest in the code. I've only just bought Dreamweaver so maybe Photoshop should be next on my list of wanna buys.

Our of interest can anyone see what is wrong with the code in that link I posted?
 
v2Media

v2Media

Member
Get Gimp if you can't afford photoshop then. The bg gradient code you're using will only work in IE, so don't use it.
 
J

jeanm

Member
Ah! I was using Firefox so that explains it. Thanks for the tip about Gimp. I shall go and investigate it right now. Jean.
 
B

bcee

New Member
Gimp or go CSS:

Code: 
background: #fallback;
	background: -webkit-gradient(linear, left top, left bottom, from(#dark), to(#light));
	background: -moz-linear-gradient(top,  #dark,  #light);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#dark', endColorstr='#light');
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Bare in mind CSS3 background are sweet, but not fully supported on all browsers, so you would want to set a solid fallback color when this situation arises.
 
J

jeanm

Member
Thanks John. Can you recommend some code please? I'm presuming it is something that I add onto the code that bcee gave me?
 
PixelPusher

PixelPusher

Super Moderator
Staff member
jeanm said:
Thanks John. Can you recommend some code please? I'm presuming it is something that I add onto the code that bcee gave me?
Click to expand...

Your welcome, and yes I sure can.
What you will want to do is define a solid bg color and then follow that with your gradients. The solid bg color will be applied first then, if accepted, the gradients will be applied after. Code would look something like this:

Code: 
div#gradient {
  background-color: #08C;
  background: -moz-linear-gradient(100% 100% 180deg, #08C, #0F5D83);
  background: -webkit-gradient(linear, left top, right top, from(#08C), to(#0F5D83));
}

Brad had some code for IE in his example that targets the work around "filter". I have not included that, not saying its bad practice, just didnt include it. In my past experience, using filter property has bogged down IE. My usual method of attack is to make the site looks decent in IE (without bells and whistles) and save all the enhancements for the more advanced browsers.

Also here are some examples of the types of gradients, and more explanation:
CSS3 Gradient Types
CSS Gradients - How it works
 
Last edited:
B

bcee

New Member
PixelPusher said:
Your welcome, and yes I sure can.
What you will want to do is define a solid bg color and then follow that with your gradients. The solid bg color will be applied first then, if accepted, the gradients will be applied after. Code would look something like this:

Code: 
div#gradient {
  background-color: #08C;
  background: -moz-linear-gradient(100% 100% 180deg, #08C, #0F5D83);
  background: -webkit-gradient(linear, left top, right top, from(#08C), to(#0F5D83));
}

Brad had some code for IE in his example that targets the work around "filter". I have not included that, not saying its bad practice, just didnt include it. In my past experience, using filter property has bogged down IE. My usual method of attack is to make the site looks decent in IE (without bells and whistles) and save all the enhancements for the more advanced browsers.

Also here are some examples of the types of gradients, and more explanation:
CSS3 Gradient Types
CSS Gradients - How it works
Click to expand...

Definitely agree, just wanted to make it as cross-browser compatible as possible. But I would personally leave it out for IE users. Better experiences for better browsers.
 
J

jeanm

Member
Thanks so much all of you. You have all been extremely helpful. My Dreamweaver will be installed later on today so I can't wait to get started re-designing my three very awful looking sites.

Originally I was dreading having to re-do the sites but the more I read about CSS and getting everything correct for XHTML then the more I want to go ahead and do it all. I'm sure there will be so many more questions to come from me.......
 
You must log in or register to reply here.
Top