Полный фон изображения с CSS / JQuery или Flash?

Question

Как мне заполнить весь фон большим изображением? Фотография 1400 * 867 и с решением здесь заполняет ширину, но не высоту. Мне все равно, если фотография обрезается, чтобы заполнить высоту тоже.

Способ CSS3 (background-size) идеален, но не работает в IE.

Если вы не знаете, как использовать css / jquery, не могли бы вы указать мне сценарий флеш-памяти, где я мог бы просто ввести путь к изображению и позволить флэш-памяти изменить его размер?

СПАСИБО!

Answer 1

Вы можете попробовать SuperSized

Answer 2

Попробуйте:

HTML:

<div id="wrapper">

   <!--bg-img-->
   <div class="bg-img>

       <img src="images/bg.jpg"/>

   </div>
   <!--bg-img-->

</div>

CSS:

.bg-img{
    /*--sets rules to fill browser window in width and height--*/
    min-height: 100%;
    min-width: 1024px;

    /*--sets proportionate scaling--*/
    width: 100%;
    height: auto;

    /*--positioning and layering of image container--*/
    position: fixed;
    top: 0;
    left: 0;
    z-index:-5;
}

Я верю CSS3метод, о котором вы говорите, выглядит примерно так:

.bg-img{
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Что ж, есть обходной путь для IE, который вы можете попробовать, но он не является надежным.Вместо этого вы можете попробовать изменить весь фрагмент:

.bg-img{
    /*--CSS3 compatible browsers setup--*/
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    /*--work around for IE--*/
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale')";
}

Удачи!Надеюсь, что это работает!

Answer 3

Взгляните на этот плагин jQuery:

http://nanotux.com/blog/fullscreen/

Я думаю, это то, что вы ищете; Надеюсь, это поможет!