Есть блок, который должен тянуться в зависимости от контента.
<div class="btn">
Целых восемь слов написано здесь здесь и ейчас
</div>
И есть у него 3 фона.
.btn{
min-width:200px;
width: 300px;
height: 59px;
color: #ddc3a5;
text-align: center;
padding-top: 20px;
background:
url(https://2.downloader.disk.yandex.ua/disk/aaf430b9ce939572da938eb7e3d86fa9c5381f7385fbd11931b0fede5809126f/57c659fe/iAfkBmukpBbBY5KaFFL6xUh4SXOQaIbkiXE7L_-lgfHz0JsSTRzzuamttLqvR2gDN-fdGROXNZk8gvut3rC6iA%3D%3D?uid=0&filename=btn-main-left.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=7803&hid=31995d3ab50a8008a0e8ad455acbb64b&media_type=image&tknv=v2&etag=2dd620a3913e11730e98bb59a3cd64bf ) no-repeat left top,
url(https://4.downloader.disk.yandex.ua/disk/950cf305629c74a82bbb4ef4d8b53d95c1cffdcb755dbeadcf8ff0036dfd3819/57c65a1e/iAfkBmukpBbBY5KaFFL6xTO7mv7miNCzvF3FS7dHsVOfDTSFHItP8weLNm0zad9C9sd2E3rw9HtCWiYqDIE2Hg%3D%3D?uid=0&filename=btn-main-right.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=7967&hid=de50413329c3775c22d6736a0700b7b9&media_type=image&tknv=v2&etag=fd6fba458bce44991facbb2cd6d5745b ) no-repeat right top,
url(https://2.downloader.disk.yandex.ua/disk/4a71626fa3c8f67d78a792def196ee63f611bec2f7ac974bb9da0e0c4ff7ded4/57c65a15/iAfkBmukpBbBY5KaFFL6xWUSjzMmhEXy2JTyYYecLUyLgsf3sQa-hAG0WGzW8qvgf1974tqgboIHDMKLBZOSug%3D%3D?uid=0&filename=btn-main-repeat.png&disposition=inline&hash=&limit=0&content_type=image%2Fpng&fsize=3368&hid=c7275fe96821e82454377a647e8b05db&media_type=image&tknv=v2&etag=38a1014b406ce31261e76aa2ab9deeef ) repeat-x center top;
background-clip: padding-box, padding-box, padding-box;
box-sizing: border-box;
margin-left: 30px;
}
Так вот суть вопросов:
Для 3й картинки фона (которая repeat-x) сделать что бы она не выползала за пределы left и right?.. Пробовал добавляя ей: bacgrkund-size: content-box; - но тогда тоже не так как нужно..
Как растягивать внешний блок в зависимости от контента?