The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Programming Fundamentals" Dec 02 - 2:00 PM Eastern

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.

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


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


    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.


    # February 16, 2013 at 10:37 am

    Have you thought about the border-image property?

    Done in one then!

    # 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:

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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed