Question

Есть код...

 .head-btns{padding:18px 0 5px} .head-btns a{display:inline-block;padding:7px 15px;font-size:11px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 #555;background:#949494 url(/.s/t/1706/btn.jpg);font-weight:700;margin:0 0 0 15px;-moz-box-shadow:inset 0 1px 3px 0 #fff;-webkit-box-shadow:inset 0 1px 3px 0 #fff;box-shadow:inset 0 1px 3px 0 #fff} .head-btns a:hover{color:#ffdb5f;background:#363636;text-decoration:none;text-shadow:1px 1px 0 #222;-moz-box-shadow:inset 0 1px 3px 0 #000;-webkit-box-shadow:inset 0 1px 3px 0 #000;box-shadow:inset 0 1px 3px 0 #000} #head-b{background:#676767 url(/.s/t/1706/nav.jpg);line-height:51px;border-bottom:2px solid #ffdb5f}

 

Вверху справа 3 кнопки. Как сделать так, чтобы картинка сама приняла нужный размер и стала фоном кнопки.

как фон поставить я знаю, но как сделать авто подгон по размеру.

Answer 1

Ссылка в итоге добавляться должна вот так:

<div class="head-btns"><a href="/">просто кнопка</a></div>

ссылку прописывайте нужную вам и название ссылки и в итоге класс head-btns автоматически выведет нужный фон для кнопки вида http://joxi.ru/V2VbnNlH0bRKW2

Comments

Так класс и так прописан

Не принимает изображение полностью.... обрезает его...

  <div class="head-btns">       <a href="/"><!--<s5176>-->Главная<!--</s>--></a>       <?if($USERS_ON$)?><?if($USER_LOGGED_IN$)?><a title="Мой профиль" href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a>         <a title="Выход" href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?><a title="Регистрация" href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a>         <a title="Вход" href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?><?endif?>      </div>

 

---

the Odin,

Замените ваши стили:

.head-btns a{display:inline-block;padding:7px 15px;font-size:11px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 #555;background:#949494 url(http://prewsite.ucoz.net/btn1.jpg);font-weight:700;margin:0 0 0 15px;-moz-box-shadow:inset 0 1px 3px 0 #fff;-webkit-box-shadow:inset 0 1px 3px 0 #fff;box-shadow:inset 0 1px 3px 0 #fff;}

на:

.head-btns a{display:inline-block;padding:7px 15px;font-size:11px;text-transform:uppercase;color:#fff;text-shadow:1px 1px 0 #555;background:#949494 url(http://prewsite.ucoz.net/btn1.jpg);font-weight:700;margin:0 0 0 15px;-moz-box-shadow:inset 0 1px 3px 0 #fff;-webkit-box-shadow:inset 0 1px 3px 0 #fff;box-shadow:inset 0 1px 3px 0 #fff;background-size: 100%;}

не забудьте после кеш в браузере очистить https://ukit.com/ru/help/kak-ochistit-cahe

---

Yuri_Geruk,

Одна кнопка полностью зарисована, другая на половину?

 Спустя пару минут...

Урааа 

background-size: 100% 100%;

Вот так встало по горизонтали и вертикали... Спасибо