There is a block that must drag on depending on the content.

<div class="btn"> Целых восемь слов написано здесь здесь и ейчас </div>

And he has 3 backgrounds.

 .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; }

So the essence of the questions:

  1. For the 3rd picture of the background (which is repeat-x), to make it not crawl out beyond the limits of left and right? .. Tried adding to it: bacgrkund-size: content-box; - but then also not as it should.

  2. How to stretch the outer block depending on the content?

https://jsfiddle.net/9114p5cd/1/

  • But was it not easier to make the pseudo-elements: before and: after for the block, to set the first and second backgrounds, respectively, and position them along the edges? - Darina Goodwill
  • I did it for bg, but the trouble is that with css I cannot make an increase in the parent width, depending on the content. - user190134
  • one
    To do this, change the display to inline-block. - Darina Goodwill
  • Yes, I did it already, they advised that it works. - user190134

1 answer 1

The issue is resolved. For rubber width set: display: inline-block;