CODEWITHSUNDEEP
htmlcssborder-box
user3080513
user3080513

Reputation: 55

How to apply a border image troughout box-sizing on a image that dynamically changes it's size according to parent's size

Dear stackoverflow users,

I have a div which contains an image (generated by php in wordpress). This image will be 100% width and auto height according to the parents div size.

I want to apply a border image which overlays the top and bottom of this image. This can be done with box-sizing: border-box. So I did.

But for some reason the border does not overlay the image, and the image gets reduced in height size or the parent increases its height size.

I'm stuck on this for ages. Is there anyway this can be done with only css?

jsfiddle: http://jsfiddle.net/SE3Na/

HTML

<div class="box1">
<div class="box2">
    <img src="http://s29.postimg.org/oj8fdc5nb/example_image.png"/>
</div>
</div>

CSS

.box1{
position:relative;
width:400px;
height:auto;
border:1px solid grey;}

.box2{
width:100%;
height:auto;}

.box2 img{
width:100%;
height:auto;
border-image:url(http://s30.postimg.org/atduh061p/border_banner_3.png) 12 12 12 12 repeat;
-webkit-border-image:url("http://s30.postimg.org/atduh061p/border_banner_3.png") 12 12 12 12 repeat;
-moz-border-image:url("http://s30.postimg.org/atduh061p/border_banner_3.png") 12 12 12 12 repeat;   
border-width: 12px 0px 12px 0px;
box-sizing:border-box;
-webkit-box-sizing:border-box;}

Upvotes: 0

Views: 371

Answers (1)

Douglas Denhartog
Douglas Denhartog

Reputation: 2054

I find :before and :after to be useful for this kind of endeavor:

.box1:before,
.box1:after
{
    position: absolute;
    z-index: 1;
    display: block;
    content: "";
    height: 12px;
    width: 100%;
    background-color: yellow;
}
.box1:after
{
    bottom: 0;
    background-color: green;
}

See it in action at JSFiddle

Upvotes: 0

Related Questions