Сверхъестественное слайд-шоу под заголовком

Question

Я использую supersized jquery plugin для отображения полноэкранного слайд-шоу фона. Посмотрите на этом сайте (это не мое, но я использую ту же структуру):

http://mysampleconcept.com/situs4/

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

Если вы предоставляете сверхбольшие LI, например, top: 100px; все изображение перемещается вниз, так что нижняя часть изображения исчезает ниже нижнего колонтитула. Так что это не то решение, которое я хочу.

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

Как я могу это сделать?

К сожалению, мой английский не самый лучший ...

Я нашел это решение, но я не знаю, как осуществить это: https://stackoverflow.com/a/12889088/1981981

Answer 1

Вы можете использовать решения, предлагаемые в этом вопросе вы refered в качестве отправной точки. Просто поместите его прямо под $ .supersized() внутри своей функции готовности документа. Поскольку вы хотите верхнее смещение, мы также должны изменить верхнее значение. Я модифицировал пропущено в соответствии с вашими потребностями:

var portfolioSize = function() { 
    var headerOffset = 100; 
    $('#supersized').css({ 
    height: $(window).height() - headerOffset, 
    top: headerOffset + 'px' 
    }); 
}; 
portfolioSize(); 
$(window).resize(function() { portfolioSize(); }); 

Я изменил $ (окно) .load событие для прямого вызова, так как мы размещаем код внутри готовой функции документа.

Не забудьте изменить CSS для позиционирования, как указано в другом ответе (https://stackoverflow.com/a/12889088/860205).