3 replies [Last post]
mlse
Offline
newbie
Last seen: 16 years 30 weeks ago
Joined: 2004-10-16
Posts: 7
Points: 0

Hi. I'm trying to display an image in both a div body and its border, using the following style information:

...
border:outset;
border-width:7px;
border-color:url(blah1.jpeg);
background:url(blah2.jpeg);
...

The background of the div is set to blah2.jpeg as expected, however the border is still the default grey colour! In my HTML book it says (I quote) - "border-color sets the color of the four borders. By supplying the URL of an image instead, the image itself is repeated to create the border". Now either I'm reading it wrong, or it just doesn't work!

What should I be doing in this case?

TIA
Mike.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

How do I display an image in a div border?

Hi mlse,
It sounds like the book is talking about styles from CSS3 not yet implemented by most browsers.
You could check the w3c site to find out more.

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 42 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

How do I display an image in a div border?

Wow - I didn't know that was in the CSS pipe-line. Cool Cool

Life's a b*tch and then you die!

obsidian
Offline
Enthusiast
South Carolina
Last seen: 14 years 30 weeks ago
South Carolina
Joined: 2004-08-15
Posts: 136
Points: 0

How do I display an image in a div border?

i have a friend that was playing with something very similar, and what he ended up doing is having a nested div to create the effect. i'm not positive exactly how he did it, but in your case it would be something like:

<div class="one">
<div class="two">
    content of inner div...
</div>
</div>

CSS:

div.one {
    margin: 0;
    padding: 7px;
    background: url("blah1.jpg");
}

div.two {
    margin: 0;
    padding: 0;
    background: url("blah2.jpg");
}

i don't know how reliable this is, but it's worth a try!

i do this same general idea for image borders that i want to apply some style to.

You can't win, you can't lose, you can't break even. You can't even get out of the game!