Border-image removes background color and center of each side
I want to remove the background color of the border image and place the border image in the center of each side of my div. Any idea how I can do this?
Here is my JSFiddle.net
HTML:
<div>WELCOME</div>
CSS
div {
background-color: #99FF00;
text-align:center;
font-family: arial;
color: #454545;
font-size: 20px;
width: 200px;
height: 100px;
line-height:100px;
margin: 50px 50px;
outline: 4px solid #000000;
border: 30px solid #FF0000;
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
}
I want to achieve this:
Any help would be much appreciated. Thank!
source to share
I played around a bit and came up with this FIDDLE .
If you look at the definitions of border images, the key is that the images are "corner" images and you can simply repeat them in the middle.
So in the fiddle, I just put the green text in the middle and absolutely positioned some ASCII diamonds. - not very elegant.
CSS
.holder {
outline: 6px solid gray;
border: 1px solid gray;
width: 200px;
height: 100px;
position: relative;
}
.diamond1 {
font-size: 40px;
position: absolute;
top: -12px;
left: 50%;
}
.diamond2 {
font-size: 40px;
position: absolute;
bottom: -10px;
left: 50%;
}
.diamond3 {
font-size: 40px;
position: absolute;
top: 20px;
left: -1px;
}
.diamond4 {
font-size: 40px;
position: absolute;
top: 20px;
right: -1px;
}
.textspan {
display: block;
border: 1px solid green;
background-color: green;
margin: 25px auto;
color: white;
height: 48px;
width: 160px;
text-align: center;
line-height: 48px;
}
source to share
Here is a working fiddle: http://jsfiddle.net/chajadan/f1pnws6v/8/
The following lines were preventing the border color from changing, if you remove them you will see the border you want:
-webkit-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
-o-border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
border-image: url(http://i58.tinypic.com/2chuwrd_th.png) 30 30 30 30;
Then I refactored the code to display the same images with a div. I used this link to vertically align side images: How to vertically align an image inside a div
Possible completely extraneous css and / or elements present. I haven't cleared it.
source to share
Instead of having images as border images, why don't they create background images at some discrete positions?
Below is the CSS explaining the divs with the background of the diamond images that are absolutely positioned.
div.greenBox {
background-color: #fff;
color: #454545;
font-family: arial;
font-size: 20px;
height: 160px;
line-height: 100px;
margin: 50px;
outline: 4px solid #000000;
position: relative;
text-align: center;
width: 280px;
}
div.whiteBox {
background-color: #99ff00;
display: block;
height: 90px;
position: absolute;
right: 38px;
top: 30px;
width: 200px;
}
div.diamond1, div.diamond2, div.diamond3, div.diamond4 {
background:url('http://i58.tinypic.com/2chuwrd_th.png') no-repeat;
display:block;
width:30px;
height:30px;
}
.diamond1 {
position: absolute;
right: 46%;
top: 0;
}
.diamond2 {
position: absolute;
top: 40%;
}
.diamond3 {
bottom: 0;
position: absolute;
right: 46%;
}
.diamond4 {
position: absolute;
right: 0;
top: 44%;
}
and here is the html markup
<div class="greenBox">
<div class="diamond1"></div><div class="diamond2"></div>
<div class="whiteBox">
WELCOME
</div>
<div class="diamond3"></div><div class="diamond4"></div>
</div>
source to share