Как разместить фоновое изображение, как wanderfly.com?

Question

Привет, ребята. я хочу иметь возможность расположить фоновое изображение, похожее на www.wanderfly.com . источник этой страницы показывает, что они используют скрытое поле ввода:

<input value="http://farm1.static.flickr.com/32/35826109_27e678ec45_b.jpg" id="backgroundImage" type="hidden"></input>

Я пытался найти реализацию CSS "backgroundImage", но не смог ее найти. однако используемое ими изображение - 1024: 685, но они придумали, как его растянуть для более высокого разрешения, обеспечив этот аккуратный полноэкранный дисплей.

Как бы я мог сделать то же самое?

Answer 1

добавьте img в ваш HTML с id="background".В вашем css напишите: #background { width: 100%; position: absolute; top: 0; left: 0; }

Демо: http://jsfiddle.net/XW9Pz/1/

Answer 2

Если вы хотите иметь полноэкранное фоновое изображение, которое растягивает монитор на 100% по ширине и высоте, не сжимая его и не сжимая, потому что монитор пользователя широкоформатный, попробуйте следующий код.это творило чудеса для меня.

CSS:

img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0 ;
    z-index: -1;
}

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; 
    }
}

HTML СТРАНИЦА:

<asp:Image ID="imgBG" runat="server" CssClass="bg" ImageUrl="~/Sites/0/PageLayouts/Images/Background.jpg" />

Answer 3

Они имеют абсолютно позиционированное изображение на переднем плане изображение.

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow-x: hidden; overflow-y: hidden; z-index: -9999; ">
    <img style="position: relative; width: 969px; height: 643.4765625px; left: 0px; top: -63.23828125px; " src="http://farm3.static.flickr.com/2146/2428825658_c5f07a8f89_b.jpg">
</div>