CODEWITHSUNDEEP
htmlcss
Arrow
Arrow

Reputation: 2904

Different Images for top and bottom of DIV's border

I have a site that I'm working on, and one of the requirements is that it cannot use any client side scripting (jQuery/JavaScript). And since I'm not that great with CSS, I'm a little stuck here.

I have a simple div, which should have a "border image". But I can't use the CSS border-image since it doesn't work with IE (already tested), and I can't get two different images for top and bottom to work with background-image: - so now I'm left wondering what I can do...

Below is what it should look like, both the arrow-looking things are 2 png files:

enter image description here

Is there any way to accomplish this? By using just 1 div, and 2 images? Without JavaScript, and also maintaining cross-browser compatibility (with some exceptions, like ie6<)?

Upvotes: 1

Views: 2636

Answers (4)

Ana
Ana

Reputation: 37179

First solution: use just gradients. No images, no extra elements or even pseudo-elements.

Of course, gradients are not supported by IE9 and older, so another solution would be to use multiple backgrounds.

IE8 and older don't support multiple backgrounds the CSS3 way, but you could use AlphaImageLoader filter as fallback for these browsers.

Upvotes: 0

loler
loler

Reputation: 2587

If the block has fixed height and width just set background one image and paddings. If it has fixed width use @Mr. Alien's solution. And if it has fixed height crop image horizontaly and make background repeat-x. If both width and height are dynamic i'd suggest to use 2-3 additional divs anyway (i know you want to avoid it), i dont think playing with :before and :after is better.

Upvotes: 0

enTropy
enTropy

Reputation: 621

Darcey's solution is very good. The box div with 3 divs inside, the middle one for content and the other 2 for the images (with css property background-image).

If you don't want to modify your html you could try playing with css :before and :after Example

Upvotes: 0

Darcey
Darcey

Reputation: 1987

This works in: IE9, Firefox, Chrome, Opera and Safari

CODE:

    <style>
      #Container {
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
        border:1px solid #000000;
      }


      .boxTop {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#00CC00;
        /*place background image css code here and remove line above*/
      }

      .box {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 200px;
        background-color:#CC0000;
      }

      .boxBtm {
        position: relative;
        left: 100;
        top: 100;
        width: 200px;
        height: 10px;
        background-color:#0000CC;
        /*place background image css code here and remove line above*/
      }
    </style>

    <div id="Container">
        <div class="boxTop"></div>
        <div class="box"></div>
        <div class="boxBtm"></div>
    </div>

Upvotes: 2

Related Questions