How To Make This Background

[bikoy888]

hi,

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

http://img15.imageshack.us/img15/9845/previewcoolexthemesbase.jpg

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 1307618725 at 1307618725 ---------------

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?

[RobbieZ]

My mistake, I saved as .jpg and not .jpeg, re-saved as re-upped as .png to reflect instructions in post #4

[bikoy888]

thanks so much guys
am very grateful

am so new in this and i know there are a lot to learn

--------------- Added 1307676238 at 1307676238 ---------------

tried to follow as per Post #4
but it yielded this

http://img714.imageshack.us/img714/6189/stylevariableeditorvbul.jpg

where have i gone wrong?

[RobbieZ]

Your URL looks wrong, you shouldnt have the words public_html in it!

Just use the exact wording as I did

url(images/Bground.png)

Hit the link 'Preview Image' this will show you that you have uploaded to the correct folder..

Remember the filename is case sensitive and must be exact!

[bikoy888]

Thanks RobbieZ

made the necessary adjustment
http://img684.imageshack.us/img684/3586/1307931748497.png

but in the forum, the gradient background still doesn't apply. here's the right side image
http://img199.imageshack.us/img199/774/1307931709543.png
any inputs?

[Felixbone]

let's say

If you are currently having a background image with small width and no-repeat, then you have it align as top and center so the banner now is currently behind your headers.

solutions: set the no-repeat to repeat-x and top center to top left it should works

[bikoy888]

thank you. it worked now
=)

[StudentCreche]

tagged