CODEWITHSUNDEEP
htmlcss
user500
user500

Reputation: 4519

CSS repeat image

How can I define background-image repeat with cap insets? I want the image to be repeated without border. Is it possible to repeat (tile) or stretch the middle in CSS?

Resizable image with cap insets.

The first (smaller) rounded rectangle is my PNG image. Red lines show cap insets I want to define. The latter (bigger) should be shown as result.

Upvotes: 1

Views: 507

Answers (2)

broofa
broofa

Reputation: 38122

Check out the CSS3 border-image property. It's designed for this sort of thing.

.box {
  border-image: url(my-image.gif) 20 20 20 20 repeat;
}

Interactive demo here.

It's supported on most non-IE browsers.

Upvotes: 3

toxicate20
toxicate20

Reputation: 5410

This looks like you could just solve this by using pure css3

.box {
 background: white;
 -moz-border-radius: 15px;
 border-radius: 15px;
 -moz-box-shadow:    inset 0 0 10px #000000;
 -webkit-box-shadow: inset 0 0 10px #000000;
 box-shadow:         inset 0 0 10px #000000;
}

Upvotes: 0

Related Questions