Я недавно задавал вопрос по авторесайзу фонового изображения для движков opencart. В итоге получил несколько ответов (см. тему). Остановился на решении, предложенном с сайта руселлер. В результате получаем вот такое , реализованное на одном из моих сайтов opencart 1.5.1.3 http://domikon.com.ua/ Сделал все как прописано, прописывал в header.tpl и stylesheet.css.Для тех кому лень искать, если брать catalog/view/theme/default/template/common/header.tpl, то вставлял нижеследующий скрипт перед закрывающим тегом </head>. Продолжение рассказа после скрипта <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script> $(document).ready(function() { var bgImage = $('#background-image'); function resizeImg() { var imgwidth = bgImage.width(), imgheight = bgImage.height(), winwidth = $(window).width(), winheight = $(window).height(), widthratio = winwidth / imgwidth, heightratio = winheight / imgheight, widthdiff = heightratio * imgwidth, heightdiff = widthratio * imgheight; if(heightdiff>winheight) { bgImage.css({ width: winwidth+'px', height: heightdiff+'px' }); } else { bgImage.css({ width: widthdiff+'px', height: winheight+'px' }); } $("#background-image").show(); } resizeImg(); $(window).resize(function() { resizeImg(); }); }); </script> <img src="Ваша картинка.jpg" id="background-image" style="width: 2000px; height:1600px; display: inline;/> Как видно из последней строки - для картинки выставил начальные условия поскольку если не выставить - как то не красиво выводится. Пришлось использовать дополнительный фон (вагонка) для того, чтобы компенсировать "красоту" при выводе сайта на маленькие экраны, так как сам шаблон резиновый получился. Да, чуть не забыл - не забудьте вставить кусок кода в Ваш stylesheet.css #background-image { 2 position:absolute; 3 top:0; 4 left:0; 5 z-index:-10; 6 overflow: hidden; 7 width: 100%; 8 display:none; 9 } Тут я еще после width:100% добавил height:100%: (возможно я не прав)
