Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS background colors

mactib

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,
 
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;
}
 
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.
 
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
 
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
 
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
Click to expand...

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?
 
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?
 
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?
Click to expand...
here it is. well you barely see it..
 

Attachments

  • sdf.jpg
    sdf.jpg
    1.1 KB · Views: 115
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

  • Picture 1.png
    Picture 1.png
    21.5 KB · Views: 134
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
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back