Grow your CSS skills. Land your dream job.

Creating Custom Div Containers Using images

  • # February 16, 2013 at 10:10 am

    Had some questions regarding making a custom div container with images. Below is the rough idea.
    gDutK5N.png

    how would i go about this? here is the code i tried.

    CSS:

    .frameTop{ width: 500px; height: 167px; background: url(../img/topframe.png); background-repeat:no-repeat; }
    .frameMid{ width: 500px; background: url(../img/midframe.png); background-repeat: repeat;}
    .frameBot{ width: 500px; height: 48px; background: url(../img/botframe.png); background-repeat:no-repeat; }

    STRUCTURE:

    it kind of works but is there a better way? is this supposed to be the way to do it, if so, is there a way to use a gradient inside the box or only solid colors because having a gradient creates problems when you add content to the middle section.

    thanks.

    # February 16, 2013 at 10:37 am

    Have you thought about the border-image property?

    Done in one then!

    http://css-tricks.com/understanding-border-image/

    # February 16, 2013 at 11:44 am

    interesting i will give it a try tonight, is this compatible with all browsers?

    # February 16, 2013 at 12:33 pm

    Depends on how far back you want to target.

    IE…probably not but: http://caniuse.com/#search=border-image

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

You must be logged in to reply to this topic.

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