Grow your CSS skills. Land your dream job.

Multiple DIV Backgrounds

  • # May 19, 2008 at 1:17 pm

    Hello, I’m trying to create a div box with round corners and shadows all around it, what is the best way to do it? Its height has to be auto stretched and the width will be fixed. Here is the image so you can see what I mean: http://www.helpnetwork.org/tutzor/images/main-bg.gif Thanks in advance.

    # May 19, 2008 at 6:52 pm

    I think the best way is working with two images. A top-image with only the round corners on the top and a bottom image very high with the bottom corners. Maybe it’s even better to use three images (so you can use smaller images) but this is probably the easiest way:

    Code:
    div#example {
    background: url(top.gif) no-repeat top center;
    }
    div#example p{
    background: url(bottom.gif) no-repeat bottom center;
    }

    hello

    It’s already late here, so sorry for any mistakes, but I just wanted to give you a quick answer, hope I did it well ;)

    # May 19, 2008 at 8:17 pm

    That is what I do when working with fixed widths, but if you are looking for something more dynamic without images try javascripts. They have their draw backs too though, render time, compatibility, and sometimes massive amounts of code added to your document.

    # May 20, 2008 at 10:38 pm

    I would do it with three divs, so you could have the middle repeat infinitely and still have the rounded corners on the top and bottom. Something like this:

    Code:
    div#top {background-image: url(‘../images/top.jpg’); background-repeat: no-repeat;}
    div#middle {background-image: url(‘../images/middle.jpg’); background-repeat: repeat-y;}
    div#bottom {background-image: url(‘../images/bottom.jpg’); background-repeat: no-repeat;}
    Code:
    Content goes here!

    Of course, you have to give the top and bottom dimensions since they’re empty, etc. But that’s the general setup.

    # May 21, 2008 at 1:38 pm

    If you mean like this website where the whole page has rounded corners and has shadow around it have a look at the videos chris did about the creation (from scratch) of this website.

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

You must be logged in to reply to this topic.

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