Jump to content

Four Corners Of Css Boxes


ravenshade
 Share

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...