Положение фона тела должно быть относительно элемента страницы - PullRequest
Новая
       17

Положение фона тела должно быть относительно элемента страницы

0 голосов
/ 19 августа 2011

У меня есть фон тела, который должен быть относительно элемента страницы (#container).При изменении размера страницы (меньшей ширины) контейнер перемещается влево (потому что он центрирован).Фон также должен двигаться влево с тем же количеством.

Теперь у меня есть следующий код, который работает для моей проблемы: 

/*
 * The background must be relative to the rest of the page elements.
 * The background position.left = 0px when the offset.left of the container = 362.
 * The new background position.left is based on the current position of the container.
 */
var beginBackgroundPositionLeft = 362;
function changeBackgroundPosition() {
    var newLeft = jQuery("div.container").offset().left;
    newLeft = (-1 * beginBackgroundPositionLeft + newLeft) + "px";
    jQuery("body").css("background-position", newLeft + " 0px");
}

jQuery(window).resize(function(e){
    console.log(e);
    // Change the position of the background 
    // when resizing the window.
    changeBackgroundPosition();
});

jQuery(document).ready(function() {

    // Change the position of the background on entering the page..
    // Is needed because we don't know the resolution of the user so it can't be done with css.
    changeBackgroundPosition();
});

Работает нормально, но также выполняетсяпри изменении размера браузера по высоте.Как я могу проверить, изменен ли размер браузера по горизонтали, поэтому изменение высоты можно игнорировать?

Конечно, можно сохранить текущую ширину окна и проверить, изменилось ли это, но я ищу более удобный способузнать что-то, чего я еще не знаю;))!

Как видите, я записал 'e' функции изменения размера, но не могу найти в ней ничего полезного ..

Надеюсь узнать что-нибудь из ваших предложений.Спасибо!

Ответы [ 3 ]

1 голос
/ 19 августа 2011

Надеюсь, вы знаете, что вы также можете установить фоновые изображения по центру с помощью CSS. 

background-position: center top; /* first value is horizontal alignment second is vertical*/
background-position: center center;
background-position: center bottom;

Или вы можете указать фоновую позицию в процентах.

Я не знаю никакой возможности обратиться только к горизонтальному изменению размера, кроме того, который вы уже упомянули (сохраните текущую ширину окна и сравните ее). Я не вижу проблемы с вашим предложенным решением. Кто-нибудь поправит меня, если есть лучший способ.

1 голос
/ 19 августа 2011

Вот как бы я "сделал что-то", если бы изменилась только ширина окна.Боюсь, в объекте события resize не так много места, который позволил бы вам обнаружить это лучше.Возможно, вы можете найти что-то в экспериментах с процентами в свойстве background-position CSS: 

var $window = $(window),
    w = $window.width();

$window.resize(function(e) {
    if (w = $window.width() == w) {
        return;
    }
    console.log('width changed');
});
0 голосов
/ 19 августа 2011

Подождите, так что body { background:#fff url(bg.jpg) no-repeat 50% 0; } не разрезает его?

...