Question

Данный форум является моим "черновиком", каркас шапки взят с форума, для которого эта шапка делается. В шаблоне того форума шапка круговая... Ширина исходной картинки 1366.

Нужно, чтобы шапка на любом экране выглядела так:

https://gyazo.com/4a02d7a158e916200d61a264b1d719ca

Чтобы не обрезалась на экранах с меньшим разрешением и не оставляла пустоту справа, если разрешение монитора больше. Можно ли это сделать в данном шаблоне?

Кусок кода, отвечающий за изображение и изображение "логотипа":
<table style="background:url('http://flaming-dragons.ucoz.net/CW.jpg') no-repeat;" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tbody><tr><td width="374"><a href="http://flaming-dragons.ucoz.net"><img alt="" src="http://flaming-dragons.ucoz.net/logo.jpg"></a></td>

Используемые изображения:

http://flaming-dragons.ucoz.net/CW.jpg

http://flaming-dragons.ucoz.net/logo.jpg

Answer 1

Нарисуйте одно целостное фото для шапки так как с частями которых у вас несколько адаптивности шапки не добиться. Нарисуете целостное, после для шапки допишите к стилям параметр:

background-size: 100%;

Comments

Вот это изображение http://flaming-dragons.ucoz.net/CW.jpg и должно быть единственным целостным)

Хочу, чтобы всё было максимально просто...

Тогда строчку
<tbody><tr><td width="374"><a href="http://flaming-dragons.ucoz.net"><img alt="" src="http://flaming-dragons.ucoz.net/logo.jpg"></a></td>
можно убрать совсем или нет?

А куда именно прописывать background-size: 100%; ???

---

SpecialK,

Отредактируйте ваш код:

<table style="background:url('http://flaming-dragons.ucoz.net/CW.jpg') no-repeat;" border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
<tbody><tr><td width="374"><a href="http://order-of-dragon.ucoz.ru"><img alt="" src="http://flaming-dragons.ucoz.net/logo.jpg"></a></td>
<td style="padding-bottom:40px;"><span style="color:#574515;font:20pt bold Verdana,Tahoma;"><b><!-- <logo> --><!-- </logo> --></b></span><br></td></tr>
</tbody></table>

замените на:

<table id="shapka-tab" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td style="padding-bottom:40px;"><span style="color:#574515;font:20pt bold Verdana,Tahoma;"><b><!-- <logo> --><!-- </logo> --></b></span><br></td></tr>
</tbody></table>

и в стили пропишите:

#shapka-tab {
    background: url('http://flaming-dragons.ucoz.net/CW.jpg')no-repeat;
    background-size: cover;
    height: 194px;
}

---

Yuri_Geruk,

Теперь при увеличении масштаба обрезается справа: https://gyazo.com/52178824359102670bfc1b0cb1f2f0c4 а при уменьшении - обрезается низ: https://gyazo.com/a4c874c7969b54db58d67a55eb71d1b3  Второе не особо страшно, а вот первое - досадно. При меньшем разрешении (1280*720) шапка обрезается справа: https://gyazo.com/2253f1112af9d16b77928f9f4836726c  А как выглядит при большем (1920, например), не могу проверить.  Как вообще делают симметричные шапки без растяжки? Наверное, это утопия - сделать так, я задумывала...

---

SpecialK,

Ну здесь уже вам нужно заказывать переработку дизайна так как мы сделали лишь малость, а вам хочется чтобы все это адаптировалось под разные разрешения, купите понравившийся адаптивный шаблон в магазине - http://utemplate.pro/shop/responsive измените немного под себя и вам не придется столько мучиться как вот с этим старым дизайном на табличной верстке.