/    Sign up×
Community /Pin to ProfileBookmark

CSS Gradient background with out image in table heading?

Is it possible CSS Gradient background with out image in table heading?

Can some one help me out!!

thanks
gm

to post a comment
CSS

7 Comments(s)

Copy linkTweet thisAlerts:
@ray326Aug 12.2006 — No you can't.
Copy linkTweet thisAlerts:
@GrobulousAug 12.2006 — I know this is using an image in the thing, but I just thought I would answer your question anyways. It is possible to create a gradient background going vertical from the top. You simply create a 1px x whatever px image of your gradient, with the bottom of the image as your page background color. you then create a css class that is something like this:
[CODE].page {
background-color : #FFFFFF;
background-image : url(images/backgroundtop.gif);
background-position : top;
background-repeat : repeat-x;
}[/CODE]

And you set whatever you want to that class and... well... you will have a gradient background.
Copy linkTweet thisAlerts:
@methodcomptechNov 27.2006 — No you can't.[/QUOTE]
you are very wronge.

there are a couple ways to do it without an image. below is one way to do it.

[code=html]body {
background-color:#FFFFFF;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#363636',EndColorStr='#FFFFFF');
margin: 0px auto;
}[/code]


keep in mind that that technique will only work in IE, adn not ff, so, it is not the best way to go. there is a way that works the same in IE and FF, but it is a lot more coding.

visit this site to generate the code. http://www.designdetector.com/demos/css-gradients-demo-1.php

btw, i only signed up here to give the correct answer.
Copy linkTweet thisAlerts:
@ray326Nov 28.2006 — I stand by my statement. Your former example is proprietary and the latter is ridiculous.
Copy linkTweet thisAlerts:
@WebJoelNov 28.2006 —  http://www.designdetector.com/demos/css-gradients-demo-1.php
[/QUOTE]

that's kind of clever. I've seen this before, -the theory of it I mean. Never seen a site actually using it, though. I can't image any situation where [I]I'd[/I] ever want to have 500 or more DIVs just to create a gradient. I still prefer the 1-px wide/hundred+ pixel tall 'repeat' graphic image. I can at least get my head around that concept.. :p
Copy linkTweet thisAlerts:
@methodcomptechNov 28.2006 — I stand by my statement. Your former example is proprietary and the latter is ridiculous.[/QUOTE]
i didnt come here to argue with you. i came to prove a point that you should research something before you make a statment as the one you made, considering that it is possible to make a gradient background in css. right now, there are two known ways, so, standing by your statement of there being no way to do it is completely wronge. also, i would like to point out that i do web design for a living, not as just a freelancer, so, i happen to know about prctically every css technique and many other languages.

thanks for the comment, but do your research.

that being said, i also mentioned that the first example would only work in IE, and the second one is crossbrowser effective. it is a rediculous method to use the second one, but, it does work. that is what the original post was asking.

i still say that going with an image is a better choice, but that is my preference. if a user would like to speed his site up, he could use the first technique, and then define that if it is a FF browser, then to use an image. simple as that, but more coding. i say just stick with an image.

that's kind of clever. I've seen this before, -the theory of it I mean. Never seen a site actually using it, though. I can't image any situation where [I]I'd[/I] ever want to have 500 or more DIVs just to create a gradient. I still prefer the 1-px wide/hundred+ pixel tall 'repeat' graphic image. I can at least get my head around that concept.. :p[/QUOTE]

i definately agree. also, loading that many div's at once slows down the site, so the image technique is by far the best way to approach the need of a gradient background.
Copy linkTweet thisAlerts:
@Jeff_MottNov 28.2006 — i came to prove a point that you should research something before you make a statement as the one you made[/quote]I'm sure we can all agree that in a practical rather than theoretical sense, ray326's statement is correct: the IE-only example is not actually CSS and the other bloated example, as others put it, is simply ridiculous. (In fact, the bloated solution probably shouldn't even be counted as a solution. I might place colored 1px-X-1px DIVs just right that they form a picture of my cat, but I would certainly not try to claim that CSS is capable of rendering my cat.)

So, the second solution is accomplish by your own hard work rather than CSS and the first solution is pseudo-CSS. Unless I'm clearly in a theoretical debate, I would also answer that it's not possible.

i would like to point out that i do web design for a living, not as just a freelancer, so, i happen to know about practically every css technique and many other languages.[/quote]Your résumé doesn't affect who is right or wrong. Save it for the interviews, because anywhere else it's meaningless.
×

Success!

Help @gmmsk7 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...