Jump to content

Four Corners Of Css Boxes


ravenshade

Recommended Posts

Okay, so, I have been playing around with curved boxes somewhat and since decided to delve in further here's my current set up

<div class="mainBox"><div class="boxHeader"><h1>text</h1></div><div class="boxContent"><p>text</p></div></div>

CSS

.mainBox {background: url (blah)no-repeat bottom right;}.boxHead {background: url (blah)no-repeat top right;.boxHead h1 {background: url (blah)no-repeat top Left;}.boxContent {background: url (blah)no-repeat bottom left;}

This set up enables me to define corners of my box, however, it's very restricted to the amount of graphic I decide to put up and not very manageable. What I need is something that would enable me to use

background: url (blah) repeat-y;	/* This would give me a vertical infinite scale in the center */background: url (blah) repeat-x;	/* Again with the infinite scale */

However, I get stuck at the sides and I'm particularly chomped as to how to get the sides infinite while displaying the four corners as well. I know how to draw it, just a single line with a dot on the end, to give me a border...can you use multiple definitions for background...or even multiple background syntax?

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...