Текущее фоновое изображение в браузере изменяет размер

Question

Я хочу добиться эффекта плавного фонового изображения, которое вы можете увидеть на этой веб-странице: http://217.116.9.130/test2.html (взято с zara.com)

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

Кто-нибудь знает и может дать подсказку (или передать мне ссылку) о том, как это сделать с помощью jquery, css, ajax или php?

Большое спасибо

Answer 1

Вы, вероятно, ищете это: http://css -tricks.com / perfect-full-page-background-image /

Это довольно просто реализовать, поэтому никаких дополнительных комментариев не требуется.

Answer 2

вы можете использовать свойство css3 cover.для этого

.container{
        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;
}

для проверки этой ссылки http://css -tricks.com / perfect-full-page-background-image /

Answer 3

Например, если ваше фоновое изображение содержится в вашем теге body, тогда CSS должно содержать назначение фонового изображения и затем включать:

top: 0;
bottom: 0;
left: 0;
right: 0;

Таким образом, когда размер окна изменяется, фон немедленноменяется с этим.Тот же принцип предоставления оверлея для модального диалога.

Answer 4

В Javascript используется только метод onResize, поэтому при изменении браузера это меняет CSS для положения фонового изображения.

Присвойте изображению идентификатор: id="fullImage"

Затем они используют JavaScript для манипулирования стилем left:; css.

При изменении размера left изменяется вверх и вниз.

Это должно сделать это:

var el = document.getElementById(fullImage),
width = window.innerWidth,
imageWidth = [width of image here];
window.onresize = function() {
  el.style.left = imageWidth - width + "px";
}

Answer 5

сделать стиль CSS

background-position: center center;

другие варианты

center top
center bottom
left top

и т.д ...