CODEWITHSUNDEEP
htmlcss
Felix M
Felix M

Reputation: 305

Strech a portion of image only

I want to create a div where only a part of background would stretch if the div gets bigger.

Situation :

Request :

Example image :

My problem

Upvotes: 3

Views: 201

Answers (1)

CupawnTae
CupawnTae

Reputation: 14580

You can use a border-image to achieve this without extra elements in your HTML. Apply the border to a :before pseudo-element with z-index of -1 to push it behind the main content. Set the top and bottom border widths to the height of the red and blue stripes (67px in this example), and left and right borders to 0. Use fill in the border-image to use the middle of the image as a background. And use border-box for box-sizing to have the borders inside the element.

.flagbg {
    position:relative;
    width:213px;
}
.flagbg:before {
    box-sizing:border-box;
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    content:'';
    height:100%;
    width:100%;
    border-width:67px 0 67px 0;
    border-image:url('flag.png') 67 0 67 0 fill repeat stretch;
}

fiddle http://jsfiddle.net/L9e3T/ - you can edit the text in the result pane and see it resize dynamically

Upvotes: 2

Related Questions