Can I get a picture in background ? you can guide me get it! thanks a lot!

How To I Set A Background Image
===============================

Setting and positioning a background image using CSS coding in the Forum Admin > Appearance > CSS panel.
--------------------------------------------------------------------------------------------------------

Before you read all this, you can just scroll down to the bottom to get the finished code, or you can read all this to get a bit more background info. You never know, some of it may be useful.... ;)

To set a background image we use the CSS property 'background-image' within the CSS selector 'body.'
The format of the 'background-image' value is :

   background-image:url(YOURLINK);

where YOURLINK is the web address of the image you want as your background image.
ie

If we put it together with the 'body' selector we get the CSS code

   body {
   background-image:url(http://YOURLINK);
   }

Now,  if we insert that into a Lefora forum we'll see a couple of things.
Firstly, you'll notice that underneath the forum boxes (the header, sidebar, footer and thread windows) there is a white box that blocks some of your background. Secondly, the image repeats itself so that it covers the entire background of your forum (unless you've conveniently chosen an image that is exactly the same size as your browser window).

Dealing with the first problem is easy. This white box is the '#page' that contains the header, sidebar, footer and thread windows. We can't remove this, because if we did, then we'd remove all the elements mentioned above. What we can do is change the colour of the #page. How does this help? Well, what we do is set the colour to 'transparent', allowing the background image to show through. The property for this is 'background-color', and if we put it together with the value 'transparent,' it looks like this :

   background-color:transparent;

Dealing with the second problem is going to open a whole can of worms... Now, if your background image is a texture or pattern, tiling will be the look you want, and it isn't a problem. However, if your background is a photograph, then tiling may be a bad look for your forum. The property for this is 'background-repeat.' There are four possible values for this. They are repeat, repeat-x, repeat-y and no-repeat. 'No-repeat' is the one we want, and what it does should be self-explanatory. (Using 'repeat-x' means that the image will repeat, but only horizontally, and 'repeat-y' means that the image will repeat vertically. Using 'repeat' means that the image will repeat both horizontally and vertically.) Now, this line of code looks like :

   background-repeat:no-repeat;

Add it all these lines together and we get

   body {
   background-image:url(YOURLINK);
   background-repeat:no-repeat;
   }

   #page {background-color:transparent;}

Put this code in your Lefora Forum, and hey presto, you have your background image.

But....

It's sitting there in the top left of your browser window. Even if you've chosen an image that's the right size for your browser, what's to say that someone else isn't looking at your page on a monitor with a higher resolution, with your image sitting up there in their top left hand corner? Background position uses the property 'background-position.' (Didn't see that one coming, did you ;-) ) 'Background-position' uses two values - one for positioning on the x-axis, and the other for the y-axis. There are three ways of describing these values. The first way is simplest, and the possible values are :

 top left
 top center
 top right
 center left
 center center
 center right
 bottom left
 bottom center
 bottom right

If you only specify one value, the second value will be assumed to be 'center'.

The second way is to use percentages, which gives you more control over the positioning. For example, 'center center' is equivalent to '50% 50%'.

The third way is to use positions, with your values set to the x position and y position. The top left corner of the screen is 0 0. Units can be pixels (your values will be '0px 0px') or any other CSS units. If you only specify one value, then the second value will be 50%.

It is possible to mix % and positions.

So, we want our image to be centered, so we will use this code :

   background-position:center center;

Before we add this to our code, have a look at the window with the image sitting in the corner. What about the white background behind it? Once the image is centred, do you want a white border round it? What if the image fails to display in a user's browser? Will the background clash with the rest of your forum colour scheme? Or even worse, will the background colour render your forum unreadable? So, we set the background colour using the same property as we used to make the #page transparent. I suggest picking a colour that complements your background image, complements your forum colour scheme, and will fit in fine if the background image is not displayed.

The 'background-color' value can be a hex value (ie #ff0000), RGB value (255,0,0,) or a colour name (ie red).

For this example we'll assume that we want the background colour to be black, so we'll use this line of code in the 'body'

   background-color:black;

We could also use either of these :

   background-color:#000000

or

   background-color:(0,0,0)

They all do the same thing. We'll add this line and our positioning to our code, and we now have :

   body {
   background-color:black;
   background-image:url(YOURLINK);
   background-repeat:no-repeat;
   background-position:center center;
   }

   #page {background-color:transparent;}

Put this code in your forum, and we have a centred image, sitting in a black border. Start scrolling through some threads though, and you'll see that the image moves... For a repeating, textured background this may not be too bad, but for a photographic background it's not so good. What we can do is make the image stationary by adding this :

   background-attachment:fixed;

so that our final code for the background is this :

   body {
   background-color:black;
   background-image:url(YOURLINK);
   background-repeat:no-repeat;
   background-position:center center;
   background-attachment:fixed;
   }

   #page {background-color:transparent;}

       ColonelJack.

       HackYour.lefora.com

The link for the tiger fur is http://i76.photobucket.com/albums/j23/CJO_UK/hyltest1/tgrbg1.jpg - I forgot to leave image links as links