Grow your CSS skills. Land your dream job.

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

  • # January 20, 2011 at 11:41 pm

    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

    # January 21, 2011 at 12:18 am

    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..









    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.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".