0

Есть блок, который должен тянуться в зависимости от контента.

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

Так вот суть вопросов:

  1. Для 3й картинки фона (которая repeat-x) сделать что бы она не выползала за пределы left и right?.. Пробовал добавляя ей: bacgrkund-size: content-box; - но тогда тоже не так как нужно..

  2. Как растягивать внешний блок в зависимости от контента?

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

4
  • А не проще ли было сделать псевдоэлементы :before и :afterдля блока, им задать первый и второй фон соответственно и спозиционировать их по краям? 1 сен 2016 в 8:58
  • Так и сделал для бг, но беда в том, что средствами css не могу сделать увеличение родителя по ширине в зависимости от контента.
    – user190134
    1 сен 2016 в 10:39
  • 1
    Для этого измените display на inline-block. 2 сен 2016 в 4:13
  • да, так и сделал уже, посоветовали - работает.
    – user190134
    2 сен 2016 в 4:25

1 ответ 1

1

Вопрос решен. Для резиновой ширины ставить: display:inline-block;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.