Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Creating Custom Div Containers Using images

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #42782
    Kaden
    Member

    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.

    #124889
    Paulie_D
    Member

    Have you thought about the border-image property?

    Done in one then!

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

    #124891
    Kaden
    Member

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

    #124898
    Paulie_D
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.