back

Using Drawn Elements as a Background/Border

(two ways i do it)

Using a regular background image

First, draw your background/border image. What I do is figure out how big I want it to be by making a base div, adjusting the width and height, and giving it a regular border to use as a guideline.

I screenshot that then throw it in my drawing program, then draw over my screenshot, like this:

I left some blank space around the base as the border I'm making is bigger. You can make it bigger or smaller, whatever ya like.

After drawing your border, remove any whitespace and save it. Get rid of your base div and make a new one. Set the width and height of this div to the width and height of your border image. Then, set the background image of your div to your border image.

Heres an example using the border I made. The width of my image is 377px and height is 204px.

Test test test I am a box

You can adjust the content inside of your box by wrapping it in a div and using margins. Margin: auto; will center your content, and margin-top will move it down from the top of the parent div. Make sure to give it a width and height as well.

Now my div will look like this! Much better, right?

Test test test I am a box

And just so you have it, here's what my html code looks like too.