PDA

View Full Version : How do you add an image to a template as a background?


MikalMirkas
19 Jun 2010, 20:42
^
How and where?

borbole
19 Jun 2010, 20:53
^
How and where?

It would help if you were a bit more precise as to where you want the background image added? A screenshot would be even better :)

MikalMirkas
20 Jun 2010, 04:49
It would help if you were a bit more precise as to where you want the background image added? A screenshot would be even better :)

All right =d
What I'm trying to achieve is something like this:
Put a certain image (http://www.pr3knights.com/layout/firestone/images/background.jpg) and put it behind something like this: -Check attachment-

You can check out the original @ www.pr3knights.com/forum

borbole
20 Jun 2010, 09:59
The forum you linked is using the default look. Anyway, from the look of it you want to place a background image to your forum. Have a look at the doc_background stylevar for that. (Enter the url to the image you want to use as a abckground for your forum where it says: Background Image)

MikalMirkas
20 Jun 2010, 18:49
The forum you linked is using the default look. Anyway, from the look of it you want to place a background image to your forum. Have a look at the doc_background stylevar for that. (Enter the url to the image you want to use as a abckground for your forum where it says: Background Image)

Yeah, I don't know how to customize anything. I'm a vBNoob. :P

Thanks, I'll check it out ^_^

borbole
20 Jun 2010, 18:51
Yeah, I don't know how to customize anything. I'm a vBNoob. :P

Thanks, I'll check it out ^_^

You are welcome.

MikalMirkas
20 Jun 2010, 18:55
The forum you linked is using the default look. Anyway, from the look of it you want to place a background image to your forum. Have a look at the doc_background stylevar for that. (Enter the url to the image you want to use as a abckground for your forum where it says: Background Image)

Results:
The image doesn't show.

What I currently have as stylevar doc_background:

Color:
Background IMG: http://www.pr3knights.com/layout/firestone/images/background.jpg
BG Repeat: Repeat
Units: px
Horizontal Offset: 0
Vertical Offset: 0

D:

borbole
20 Jun 2010, 19:03
Results:
The image doesn't show.

What I currently have as stylevar doc_background:

Color:
Background IMG: http://www.pr3knights.com/layout/firestone/images/background.jpg
BG Repeat: Repeat
Units: px
Horizontal Offset: 0
Vertical Offset: 0

D:


Did you enter the url to your image properly? For ex:

url(images/bacground.jpg)

Then make sure that you have uploaded the bacground.jpg at your images directory.

MikalMirkas
20 Jun 2010, 19:09
Did you enter the url to your image properly? For ex:

url(images/bacground.jpg)

Then make sure that you have uploaded the bacground.jpg at your images directory.

I just copypasta'd the url. I'm assuming I did something wrong.

borbole
20 Jun 2010, 19:16
I just copypasta'd the url. I'm assuming I did something wrong.

You didn''t enter it properly. Try this for the direct url.

url(http://www.pr3knights.com/layout/firestone/images/background.jpg)

You should place the image link inside the the url() indetifier, like in my example above. Try it and let me know.

MikalMirkas
20 Jun 2010, 19:20
You didn''t enter it properly. Try this for the direct url.

url(http://www.pr3knights.com/layout/firestone/images/background.jpg)

You should place the image link inside the the url() indetifier, like in my example above. Try it and let me know.

Heh, it did it! :D
Do you know how to replace the red underneath the navbar?
I want the image to show more.

borbole
20 Jun 2010, 19:22
What red? Can you post a screenshot? You can try to make the forum width a bit narrower so the background image will be shown more for ex.

MikalMirkas
20 Jun 2010, 19:24
What red? Can you post a screenshot? You can try to make the forum width a bit narrower so the background image will be shown more for ex.

If you check out my forum and go to the style changer - go to the one called PR3Knights

--------------- Added 1277067690 at 1277067690 ---------------

I also have another question - how do you make the image static? As in if you scroll down the page, the text will scroll but not the image?

ViperE-mpire
27 Jun 2010, 21:25
Looks like you fixed both issues already. Good job.

setishock
29 Jun 2010, 20:34
And for those reading this thread that also would like to know how he fixed the image scrolling with the forum, here's the way to do it.
At the end of the image url add the word > fixed. Like this:

url(path/to/your/image) fixed

That pins the image down so when you scroll down the forums the forum slides over the background image. In some cases where the image is not big enough, you may also want to set the repeat to no repeat and use a filler color found at the top of the stylevar.