Владимир55
22.11.2013 - 19:50
Фон задан картинкой (см.
http://wowa55.pz9.ru/10.html). При уменьшении размеров окна браузера размер блока также уменьшается. При этом фон меняет свой дизайн, поскольку отсекается его нижняя часть.
Существует ли способ сделать так, что бы дизайн фона сохранялся?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Варианты верстки</title>
<style>
#Head {overflow:hidden; max-width:1000px; margin:0 auto; background-image:url(fone-1px.gif); background-repeat:repeat-x;}
#Head .left {float:left; width:1%;}
#Head .left img {width:100%; height:auto;}
</style>
</head>
<body>
<div id="Head">
<div class="left">
<img src="10-160-2.gif">
</div>
<div class="clear"></div>
</div>
</body>
</html>
Игорь_Vasinsky
22.11.2013 - 19:53
Владимир.. вы что мутите
размер фоновой картинки будет пропорционально изменятся при изменении размера окна.
остальное на JS - но это не выгодно
_____________
HTML, CSS (Bootstrap), JS(JQuery, ExtJS), PHP, MySQL, MSSql, Posgres, (TSql, BI OLAP, MDX), Mongo, Git, SVN, CodeIgnater, Symfony, Yii 2, JiRA, Redmine, Bitbucket, Composer, Rabbit MQ, Amazon (SQS, S3, Transcribe), Docker
redreem
22.11.2013 - 19:59
#Head {overflow:hidden; max-width:1000px; margin:0 auto; background-size:100% 100%;background-image:url(fone-1px.gif); background-repeat:repeat-x;}без постоянного использования справочника - дальше в верстке делать нечего.
redreem
22.11.2013 - 20:01
даже репит-x тут уже не нужен:
#Head {overflow:hidden; max-width:1000px; margin:0 auto; background-size:100% 100%;background-image:url(Варианты\ верстки_files/fone-1px.gif); }
redreem
22.11.2013 - 20:04
вообще довольно сложно придумать макет, который бы не верстался изящно, без излишеств, прозрачно и понятно. вопрос только во владении CSS. мне лично в жизни встретилась только одна проблема, которую решить на CSS я личн не смог:
http://phpforum.su/index.php?showtopic=56285&hl=
Владимир55
22.11.2013 - 20:11
СУПЕР!
Большое спасбо! Вот это именно то, что нужно!
Только есть странный нюанс: фон чуть-чуть выступает вниз относительно фиолетового столбика.
Никак не пойму, в чем причина...
redreem
22.11.2013 - 20:25
#Head .left img {width:100%; height:100%}
Владимир55
22.11.2013 - 20:29
Это не прокатило, но вылечилось полным сбросом всех настроек браузера по умолчанию.
Интересно, а можно прилепить заплатку, чтобы background-size и в ИЕ8 работал?