[CODE] Double-Background Table
#1
[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel mi arcu, vel pulvinar felis. Morbi venenatis nunc ac quam bibendum at tristique libero facilisis. Morbi porta justo et felis vestibulum a elementum velit iaculis. Duis tempor, ante sed dignissim vulputate, enim urna molestie lacus, et volutpat nulla lacus et ligula. Donec in molestie lacus. Nulla vel quam eu diam blandit ultricies a in felis. Phasellus purus neque, mattis eget suscipit eu, posuere id dui.

Nunc vitae malesuada sapien. "Vestibulum arcu enim, egestas sollicitudin tincidunt nec, sollicitudin quis ante." Praesent risus ligula, laoreet sit amet facilisis eu, convallis a nisl. Morbi suscipit aliquet lectus, in eleifend neque ultrices sit amet. Praesent nec risus neque, non placerat tortor. Aliquam iaculis, nibh eu facilisis molestie, augue diam rhoncus tellus, in euismod leo augue in urna. Curabitur felis arcu, adipiscing quis porttitor ac, venenatis non nibh. Curabitur et placerat purus. Pellentesque magna dui, vulputate vel semper et, iaculis vel velit. Quisque iaculis purus non purus gravida elementum. Morbi dolor purus, scelerisque non tempus ut, semper quis erat. Nulla egestas faucibus ornare. In eget quam ac erat fringilla gravida ut vitae erat. Nunc ornare laoreet ligula semper ultricies. Vestibulum eu dolor quis sapien vehicula adipiscing sed vitae dui. Etiam dolor ante, luctus at posuere non, aliquet sed diam.

<style type="text/css">
.duuper b {font-weight:bold; color:#fff;}
.duuper p {text-indent:0px; padding:5px 15px; margin:0px;}
.duuper {margin:0 auto; width:500px; background-color:#7BB675; background-image:url(http://i.imgur.com/rd8Yq.png), url(http://i.imgur.com/AymUo.png);
background-position: center top, center bottom;
background-repeat: no-repeat, no-repeat; border:1px solid #1F571A; padding: 100px 0px 100px 0px; font-family: Georgia, serif; font-size:12px; color:#3B7835; letter-spacing:.6px; word-spacing:.9x; line-height:13px; text-align:justify;}
</style>[/html]

Defining factor:
Code:
background-image:url(backround1u​rl), url(backround2url);
background-position: background1's position, background2's position;
background-repeat: background1's repeat value, background2's repeat value;
#2
TRANSPARENT TWO BACKGROUND TABLE

[html]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel mi arcu, vel pulvinar felis. Morbi venenatis nunc ac quam bibendum at tristique libero facilisis. Morbi porta justo et felis vestibulum a elementum velit iaculis. Duis tempor, ante sed dignissim vulputate, enim urna molestie lacus, et volutpat nulla lacus et ligula. Donec in molestie lacus. Nulla vel quam eu diam blandit ultricies a in felis. Phasellus purus neque, mattis eget suscipit eu, posuere id dui.

Nunc vitae malesuada sapien. "Vestibulum arcu enim, egestas sollicitudin tincidunt nec, sollicitudin quis ante." Praesent risus ligula, laoreet sit amet facilisis eu, convallis a nisl. Morbi suscipit aliquet lectus, in eleifend neque ultrices sit amet. Praesent nec risus neque, non placerat tortor. Aliquam iaculis, nibh eu facilisis molestie, augue diam rhoncus tellus, in euismod leo augue in urna. Curabitur felis arcu, adipiscing quis porttitor ac, venenatis non nibh. Curabitur et placerat purus. Pellentesque magna dui, vulputate vel semper et, iaculis vel velit. Quisque iaculis purus non purus gravida elementum. Morbi dolor purus, scelerisque non tempus ut, semper quis erat. Nulla egestas faucibus ornare. In eget quam ac erat fringilla gravida ut vitae erat. Nunc ornare laoreet ligula semper ultricies. Vestibulum eu dolor quis sapien vehicula adipiscing sed vitae dui. Etiam dolor ante, luctus at posuere non, aliquet sed diam.

<style type="text/css">
.dooper b {font-weight:bold; color:#365608;}
.dooper p {text-indent:0px; padding:5px 15px; margin:0px;}
.dooper {margin:0 auto; width:500px; background-color:none; background-image:url(http://i.imgur.com/AymUo.png), url(http://sleepyglow.net/souls/50pct_white.png);
background-position: center bottom, center top;
background-repeat: no-repeat, repeat; border:1px solid #1F571A; padding: 10px 0px 100px 0px; font-family: Georgia, serif; font-size:12px; color:#3B7835; letter-spacing:.6px; word-spacing:.9x; line-height:13px; text-align:justify;}
</style>[/html]
What this does is it allows for a header or footer image, but causes the actual table's background to be a shade of 50% transparent white. It will contain the color of the background of the board without messing up the color of text you want.
#3
:O Very useful! I never knew how to do this without some more complicated coding; I didn't realize how easy it would actually be, haha. Thanks on behalf of a table-maker. Big GrinD

I still don't quite understand what the second one does... You mean the background color will be 50% white over what the board color is? So very light for this current default skin, but if the background skin was red, it'd be light red instead? (Raze should probably test this before blabbering questions but...)
#4
Thanks!

And that's right; in the default skin right now, it's pretty light, but if you went to a skin where the post body was black, then the table would be a medium gray. :O Likewise, if the post body was dark orange, the table would be a light orange.
#5
That's what i wanted to use for Kiara's fish table! Except I couldn't figure out how to make it work. Thanks!


Forum Jump: