How To Make This Background

[bikoy888]

hi,

how can i make this gradient color in the background? both left and right



using v4.1.3

TIA

[Felixbone]

doc_background stylevars
top left repeat-x

It should do.

[TWood]

Usually the background is set to a color. Then create a 1 pixel wide by however tall you want the gradient portion to be, image. The gradient in the image should start at some color and then end at the same color as the background so it blends in. Then make it the background-image, align top left and repeat-x. That means it will start at the top left and then repeat horizontally (x direction) across the page. Here at vBulletin.org, it looks like they have gradients set to repeat-y (vertically) down each side of the body.

EDIT:
BTW, Adobe Fireworks is a great program for doing this. There are probably other programs too, but they should work in hexadecimal (#121212) web colors, and not just RGB (000 111 222) colors to get everything using the same system.

[RobbieZ]

Photoshop

Upload this file to your path so it looks like this : images/bground.npg

Attached Thumbnail is only for visual - full size in zip

Now go into your style's stylevar and set these:

Common - doc_background

Background Colour : #3F65A3
Background Image : url(images/bgound.png)
Background Repeat: No Repeat
Bacgd Img H-Offset : top
Bckgd Img V-Offset : center

[Felixbone]

Background Colour : rgb(0,0,0)
Background Image : url(images/brgound.png)
Background Repeat: No Repeat

it must be repeat-x to keep the image repeating to fill the background.
the color is not 000 but something like #3E64A3 if you are going to put it on top.

[RobbieZ]

Thanks for your input Felixbone, I changed the BG colour to the bottom gradient colour and changed my post to reflect.

The OP asked how to make the background so I did, following my instructions, will bring my result as seen in my attachment.

The last colour at the bottom is #3F65A3 and then gradients up into #020202 which is all I could go off from the image that was posted.

Changing the image to repeat-x will make no difference unless your forum is longer that 1350px which is why the background colour should be #3F65A3. If it does indeed become longer then you will not see the change as all the gradient is set at the top and not at the bottom.

Happy designing

[Felixbone]

But if you are using repeat-x you can make it work even with a 1px width image.

And it reduce time load (ok not that much but it better).

It likes using a table vs css. Both did the same work but I prefer the smarter one.

Anw, hope he can make it done.

[RobbieZ]

OK, I'm up for that challenge..

[RobbieZ]

New: Set to repeat-x and upload new image

[setishock]

Might want to add > fixed < to the end of the image url. That will pin the image letting the forum slide over it. Otherwise all your hard work on making that back ground look so good goes out the top of the screen when you scroll to the bottom of the forum.

--------------- Added [DATE]1307618725[/DATE] at [TIME]1307618725[/TIME] ---------------

RobbieZ when I upload the unzipped background my uploader says it's got the wrong type of file extention. Is it really a jpeg or is it a png?