Home › Discussions › Campaign Portal Building › Background Images Revisited - Campaign Portal Building Discussions on Obsidian Portal Community Forums
Background Images Revisited
Hi all! Posting here at the suggestion of a couple nice folks! "My page is here":http://www.obsidianportal.com/campaign/akara/ first of all.
You see, I have that image (the parchment with writing already in it) that I want to make the WHOLE background. I have read the existing forum posts (kudos and thanks to ChainsawXIV, Sandman, Ahsheesh, Gnunn, et al) and have learned a LOT.
However, there is a bit more lacking. First, I think, is my knowledge. I do not know CSS and my HTML is sorely lacking. Textile is pretty easy, but not strong enough to do what I need it to. I have examined the potential of "slicing" it, with little luck. Also messing with the paddings and so forth yield little. The best I've been able to do is fill the body with about 12 of the following:
TEST
Hardly an elegant solution, though it does allow me to see more of the background.
Any solutions?
Also, my Wiki page. I am attempting to convert the table (courtesy Gnunn) to IMAGES. Again, no love. Any ideas? Also, whomever it was that provided those free buttons, THANKS!
You see, I have that image (the parchment with writing already in it) that I want to make the WHOLE background. I have read the existing forum posts (kudos and thanks to ChainsawXIV, Sandman, Ahsheesh, Gnunn, et al) and have learned a LOT.
However, there is a bit more lacking. First, I think, is my knowledge. I do not know CSS and my HTML is sorely lacking. Textile is pretty easy, but not strong enough to do what I need it to. I have examined the potential of "slicing" it, with little luck. Also messing with the paddings and so forth yield little. The best I've been able to do is fill the body with about 12 of the following:
TEST
Hardly an elegant solution, though it does allow me to see more of the background.
Any solutions?
Also, my Wiki page. I am attempting to convert the table (courtesy Gnunn) to IMAGES. Again, no love. Any ideas? Also, whomever it was that provided those free buttons, THANKS!
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Comments
ChainsawXIV helped me with a monitor graphic, which was split into a top part, middle part and bottom part, placed with HTML tags.
Here's the code he gave me:
__________________________________
CONTENT
_____________________________________
I dunno if that will help you or not. If you can find a tilable image, it's a bit easier:
_____________________________________
CONTENT
_______________________________________
Just change the image URL to your tileable image, and the colors of everything as appropriate. You could probably actually do without the second set of tags (It makes the background solid black for my page for readability)
Hope that helps some, and if not, at least it'll be a free bump.
In response to your question, and for clarification's sake: Yes, it is ONE image that I edited to INCLUDE the words written on it (to get some fonts I like). I essentially would like to take the parchment part and have it extend all the way down to the bottom of my home page. If I have to use the BASE parchment image (without editing), that's fine. I just want that ONE texture to cover my whole Home Page.
Cheers,
-Arsheesh
The first code is likely more what you're looking for, which means you'll need to take that image, and split it into 3 parts, repeatable in the middle section.
The page "here":http://www.obsidianportal.com/campaign/intothebreach/wikis/nsbc uses that code from ChainsawXIV, and it incorporates "this middle image":http://omnichron.net/external/op/src/mon_middle.png, and "this top image":http://omnichron.net/external/op/src/mon_top.png, with "this bottom image":http://omnichron.net/external/op/src/mon_bottom.png and makes it look like one solid image.
With Textile you can change the width and placement of the image to fit where you want as well, using the ! tags.
!(media-item-align-WHERE) {width:XXXpx}URLOFIMAGE!
You might also try cutting the borders off of your image with the text, and dropping the padding just a bit.
I know that's not a very in-depth explanation of how to do this, so if you have any questions about how to adjust, use, or reuse it, just holler and I'll be happy to answer.
The proper tools make all the difference. If you don't want to invest in Photoshop, I can recommend "GIMP":http://www.gimp.org/ as a free alternative. It has all the essentials you need for this type of work, and there are heaps of tutorials and guides out there to help you learn to use it. The same can be said for HTML and CSS. Check out "W3Schools":http://www.w3schools.com/ for good tutorials on those subjects - I've learned a great deal there, and they're my preferred reference source for web stuff in general. Search them for any given web design subject, and there's probably a good breakdown.