[Помогите] Авто ресайз фонового изображения

Тема в разделе "OpenCart", создана пользователем larik2, 15 апр 2013.

  1. larik2

    larik2

    Регистрация:
    13 янв 2013
    Сообщения:
    7
    Симпатии:
    2
  2. halfhope

    halfhope

    Регистрация:
    31 дек 2012
    Сообщения:
    285
    Симпатии:
    312
    Прочтите http://habrahabr.ru/post/119127/ , возможно, поможет. Вы можете использовать css свойство zoom в связке в screen max-width;
     
  3. weber

    weber

    Регистрация:
    7 фев 2013
    Сообщения:
    98
    Симпатии:
    32
    а еще попробуйте свойство background-size: 100%;
    только почитайте о нем например тут насчет поддержки браузерами.
     
  4. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    так пойдет?... ресайзит везде, задает изображение в зависимости от времени суток... если не надо - выкинуть лишнее не проблема

    HTML:
    <script type="text/javascript">
    	function screenSize() {
    	var w, h; // Объявляем переменные, w - длина, h - высота
    	w = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth));
    	h = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
    	return {w:w, h:h};
    }
    	theTime = new Date();
    	theHour = theTime.getHours();
    	if(theHour>7&&theHour<18){
    jQuery('body').append('<img src="/images/vesna1.jpg" id="bg" alt="" style="display:block;position:fixed;top:0;left:0;min-height:100%;width:100%;z-index:-1;">');
    	}
    	else{
    jQuery('body').append('<img src="/images/vesna3.jpg" id="bg" alt="" style="display:block;position:fixed;top:0;left:0;min-height:100%;width:100%;z-index:-1;">');
    	}
    	function imageresize() {
    		var width = jQuery('body').width();
    		var height = jQuery('body').width();
    		var SSize = screenSize();
    		jQuery('#bg').attr('width',SSize.w);
    		jQuery('#bg').attr('height',SSize.h+30);
    			 
    	}
     
    	imageresize(); 
    	jQuery(window).bind("resize", function(){
    		imageresize();
    	});
     
    </script>
    
     
  5. larik2

    larik2

    Регистрация:
    13 янв 2013
    Сообщения:
    7
    Симпатии:
    2
    Я решил на опенкарте сделать сайт фирмы. Сама идея мне понравилась, поскольку довольно таки шустрый движок. На руселлере скачал скрипт http://ruseller.com/lessons.php?rub=32&id=1034.
    Очень долго думал куда впихнуть, поскольку не сильно в программировании разбираюсь и вставил вот сюда в header.tpl перед body
    <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="http://localhost/domikon/nature.jpg" id="background-image" style="width: 2000px; height:1600px; display: inline;/>
    </head>
    <body>

    В итоге картинка ресайзится, но есть проблема с нижней частью сайта. Я знаю - ответ где-то близко. Мне нужно чтобы картинка определенного разрешения скажем 2560х1600 при разных разрешени экрана полностью занимала всю страницу - от хедера до футера.
    --- добавлено: Apr 17, 2013 2:08 PM ---
    мне кстати эта идея понравилась - только - не пойму куда вставить этот код -и что прописывать в css?
     
  6. web2us

    web2us

    Регистрация:
    10 мар 2013
    Сообщения:
    0
    Симпатии:
    0
    мой этот код вставляется сразу после тэга <body>
     
    larik2 нравится это.