50.forumer.com Custom Background Image

[TKOwnedU5]

Hey,

I want to have my own custom background image..but still have the same template I just want to change the background from white to a image I have saved on my computer is there a way to do this. Thanks-

-Tony

[gameking19]

i would really want to know that to

[TKOwnedU5]

So can we get any help here?? Thanks

[Wild Cat]

Originally Posted by TKOwnedU5

So can we get any help here??

A little patience would be appreciated, I do this in my spare time and for free, some more serious issues have to take priority sometimes!

----------------------

you will need to host the image on an image host and link it in to your forum, using the direct link to the image.

ACP -> Styles -> Themes -> Edit -> find the code which starts with "Body" ...different styles got it slightly different but all start with "body" and should look something like this (it is from Prosilver):

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

and add this code to the bottom

background-image: url("http://direct link to your image"); 

just before the bracket like this:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
        background-image: url("http://direct link to your image");
}

Make sure you save the style sheet to your computer before you edit it in case you mess up something, so you can restore it.

If you tell me which style you want to edit I can help you with the code...

[KasToRiArA]

Originally Posted by Wild Cat

A little patience would be appreciated, I do this in my spare time and for free, some more serious issues have to take priority sometimes!

----------------------

you will need to host the image on an image host and link it in to your forum, using the direct link to the image.

ACP -> Styles -> Themes -> Edit -> find the code which starts with "Body" ...different styles got it slightly different but all start with "body" and should look something like this (it is from Prosilver):

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

and add this code to the bottom

background-image: url("http://direct link to your image"); 

just before the bracket like this:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
        background-image: url("http://direct link to your image");
}

Make sure you save the style sheet to your computer before you edit it in case you mess up something, so you can restore it.

If you tell me which style you want to edit I can help you with the code...

There is a problem with that.. You need a very big picture otherwise it seems awfull..
Edit: here is my url http://tims.50.forumer.com/index.php check how the picture is being seen

[Wild Cat]

background-image: url("http://direct url of your image"); 
background-attachment: fixed;
background-repeat: repeat; 

The colored parts explained:

Add the background image-> Write there the Direct URL of your image

If you want to add a big image and you want it to be fixed and the forum moving on top of it you can add this....... if you want your background to move together with your forum (when scrolling) then you can leave it out...

If the image is small and you want to fill the whole background with it (tile it) you can set it to "repeat" ......... if you have a large image which you only want to display once then set it to "no-repeat" (background-repeat: no-repeat)

[cityrailsaints]

Originally Posted by Wild Cat

A little patience would be appreciated, I do this in my spare time and for free, some more serious issues have to take priority sometimes!

----------------------

you will need to host the image on an image host and link it in to your forum, using the direct link to the image.

ACP -> Styles -> Themes -> Edit -> find the code which starts with "Body" ...different styles got it slightly different but all start with "body" and should look something like this (it is from Prosilver):

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

and add this code to the bottom

background-image: url("http://direct link to your image"); 

just before the bracket like this:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
        background-image: url("http://direct link to your image");
}

Make sure you save the style sheet to your computer before you edit it in case you mess up something, so you can restore it.

If you tell me which style you want to edit I can help you with the code...

Where do you post this code

[Wild Cat]

As I've said above:

ACP -> Styles -> Themes -> Edit

[cityrailsaints]

Oh, I just relised ACP=Administrater Control Panel Thanks

[KasToRiArA]

Originally Posted by Wild Cat

background-image: url("http://direct url of your image"); 
background-attachment: fixed;
background-repeat: repeat; 

The colored parts explained:

Add the background image-> Write there the Direct URL of your image

If you want to add a big image and you want it to be fixed and the forum moving on top of it you can add this....... if you want your background to move together with your forum (when scrolling) then you can leave it out...

If the image is small and you want to fill the whole background with it (tile it) you can set it to "repeat" ......... if you have a large image which you only want to display once then set it to "no-repeat" (background-repeat: no-repeat)

look i want to edit dark shines theme with this picture

direct link: http://img36.imageshack.us/img36/199...t77c2c0wy3.jpg
but it doesnt work :S
i tried what u told me but.., no use :S

[Wild Cat]

The Dark shine theme has some additional code, that's why it did not work... I did it on my test board here's how it looks like.

You need to find this code:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

and replace it with this:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
        background-image: url("http://img36.imageshack.us/img36/1994/warcraft77c2c0wy3.jpg"); 
        background-attachment: fixed;
        background-repeat: repeat; 
}

then scroll down in the CSS and find this code:

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #9a9a9a;
	background-color: #000000;
}

and remove this bit:

body {
	color: #9a9a9a;
	background-color: #000000;
}

[KasToRiArA]

nothing that didnt work..I made you a test account if you could help me out :S
The picture is being seen twice how can i make it be 1 and big enought to cover all the space?

[Wild Cat]

You don't need to quote my post all the time if there are no posts in between..... it just makes the thread real long..

It is seen twice because it is set to repeat, the image is too small to cover the whole screen

You can not make it flexible, so if you want it to be 1 image and cover the whole screen, you need to resize it first to make it bigger.

[weeksybro]

i am needing the same help.. but as i have done this it comes up were the picture should be as a small square with a red ccross

i would like to do this with

dark fantashy

or summer fun..

can you do the code up for me with this picture!

http://i580.photobucket.com/albums/s...80483423-1.jpg

thanks hope you can help!

[Wild Cat]

This is what the dark shine looks like with your image:

You need to find this code:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
}

and replace it with this:

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: Verdana, Helvetica, Arial, sans-serif;
	color: #828282;
	background-color: #FFFFFF;
	/*font-size: 62.5%;			 This sets the default font size to be equivalent to 10px */
	font-size: 10px;
	margin: 0;
	padding: 12px 0;
        background-image: url("http://i580.photobucket.com/albums/ss245/weeksybro/Decorated%20images/1227880483423-1.jpg"); 
        background-attachment: fixed;
        background-repeat: repeat; 
}

then scroll down in the CSS and find this code:

--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #9a9a9a;
	background-color: #000000;
}

and remove this bit:

body {
	color: #9a9a9a;
	background-color: #000000;
}

========================================================

Summer fun: it needs too much editing and is quite complex, and did not look good at all with that image...