CSS background colors

mactib

macrumors member
Original poster
Jul 21, 2006
56
0
Guys,
I am working on this website of mine and so..in the css coding i put in:

body {
background-color: #FFFFFF
}

OK. so is there anyway I will be able to put in a gradient in the background coloring or....do I have to put the gradient coloring as an image file?

Thanks,
 

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,802
174
Bergen, Norway
For gradient you need to use an image file...

Best for a straight gradient is to use a one pixel wide (or high) image file much higher (or wider) than an average window and then repeat that...

PHP:
body {
background: #FFF url(vertical-line.gif) repeat-x scroll center!important;
}
or
PHP:
body {
background: #FFF url(horisontal-line.gif) repeat-y scroll center!important;
}
 

khaos34

macrumors newbie
Jul 28, 2006
17
0
I just want to make a suggestion re: the one pixel high (or wide) image - although the image will be small, it's better to make the image just a little bit wider (or taller) - maybe 10 - 20 pixels. The browser takes longer to try and pattern 1000 images across the screen than 100 or 50, and the gain on image size is very minimal.
 

mactib

macrumors member
Original poster
Jul 21, 2006
56
0
well I tried putting in an image file but the texture is not smooth at all. the whole body looks like its a repetition of the image file. So what should I do to smoothen them? And I am using Dreamweaver 8
 

kaboutertje

macrumors regular
Jul 7, 2006
175
0
Amsterdam, Netherlands
You probably made a real background image, instead of a color. If you want a pattern you need to design it keeping in mind that it has to look good if it's surrounded by the same images.
It's hard to explain but otherwise it looks crap (think that's what happened with your background right now). Cause there is no way a 1 pixel background in the same color can not look 'smooth'.

But post a link it's easier
 

mactib

macrumors member
Original poster
Jul 21, 2006
56
0
kaboutertje said:
You probably made a real background image, instead of a color. If you want a pattern you need to design it keeping in mind that it has to look good if it's surrounded by the same images.
It's hard to explain but otherwise it looks crap (think that's what happened with your background right now). Cause there is no way a 1 pixel background in the same color can not look 'smooth'.

But post a link it's easier
I think I saved it as a real background image.
1) I made it in Illustrator CS2
2) Then saved it for the web.
3) Saved as .gif file.
4) loaded as background image file.
5) repeat-x
and the end result is really bad.

So, what should I do?
 

khaos34

macrumors newbie
Jul 28, 2006
17
0
I think that we would have to see the image to know exactly what you're talking about, as Mitthrawnuruodo has suggested :) Can you post it?
 

mactib

macrumors member
Original poster
Jul 21, 2006
56
0
khaos34 said:
I think that we would have to see the image to know exactly what you're talking about, as Mitthrawnuruodo has suggested :) Can you post it?
here it is. well you barely see it..
 

Attachments

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,802
174
Bergen, Norway
The attached image here is a jpg, and I think you'll get better result with a gif...

Now, if I just try out this code

PHP:
<html>
<head></head>
<body style="background: #fee url(sdf.jpg);">
<p>Hallo</p>
</body>
</html>
I get it working, but the gradient doesn't seem very smooth...
 

Attachments

Mitthrawnuruodo

Moderator emeritus
Mar 10, 2004
13,802
174
Bergen, Norway
Now I just made a simple background in Photoshop, 20 x 1000 px, and used the gradient tool with some random green to white. Then used the "Save for the web" and saved it as a gif with 256 selective colours. That's this file:

dill.gif

Then, when I use the same code as above the background gets fairly smooth:

Picture 2.png