Forums

smithaa99

http://www.parkarvidsonacupuncture.com/NANCY_BLOG_WEB.gif

Just what the title says, my client wants the parchment paper as her container.
This template was done by another company, and I'm doing the back-end coding.

Is there a way, with the frayed parchment edges and all, to also make this a scaleable image? JQuery?
I was thinking that making the outside edges tables and the inside be a plain repeat background would do that.

Thoughts? I'm boggled!

Thank you very much,
Adam

chrisburton

You mean top and bottom not edges. Also, tables are not meant for that, they are meant for things like calendars or graphs. I think what you can do is create 2 images, one for the top and one for the bottom. Create a div for the top and bottom as well. Code could look something like this..


<div class="main-top">
</div><!-- Top Image -->

<div class="main">
</div>

<div class="main-bottom">
</div><!-- Bottom Image -->

CSS


.main-top {
    width: 80%;
    height: 40px;
    background: url("/images/paper-top.gif") no-repeat;
    margin: 0 auto;
    padding: 0;
}

.main {
    width: 80%;
    min-height: 600px;
    background: url("/images/paper-main.gif") repeat;
    margin: 0 auto;
    padding: 10px 15px;
}

.main-bottom {
    width: 80%;
    height: 40px;
    background: url("/images/paper-bottom.gif") no-repeat;
    margin: 0 auto;
    padding: 0;
}

I could be wrong but you might have to repeat the images to make them scale.

treehouse : what would you like to learn today?

Forums

How do I make a scaleable container with a partially transparent background?