Полностью отзывчивое фоновое изображение

Question

Я пытаюсь понять, как я могу сделать полное фоновое изображение отзывчивым. Сначала я использую jQuery Anystretch.

Код.

functions.php

wp_register_script('jquery.anystretch', get_template_directory_uri() .'/js/jquery.anystretch.js', array('jquery')); 
wp_enqueue_script('jquery.anystretch'); 

main.css

.imgheader { background: url("images/image.png") height:450px; width:100%; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative} 

index.php

<figure class="container imgheader"> </figure> 

header.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
<?php wp_enqueue_script('jquery'); ?> 
<script type="text/javascript"> 
jQuery(document).ready(function($) 
{ 
(function() 
{ 
$('.imgheader').anystretch("images/image.png"); 
}) 
}); 
</script> 

Кроме того, я стараюсь с:

$('figure.imgheader').anystretch("images/image.png"); 

Из документации:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('.imgheader').anystretch("images/image.png", {speed: 150}); 
}); 
</script> 

третьего редактирования:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('figure.imgheader').anystretch("images/image.png", {speed: 150}); 
}); 
</script> 

4-е обновление: Проблема такая же с jquery-backstretch. Я загружаю плагин для полного фонового изображения и изображения, которое находится внутри контейнера, и не работает. С помощью Firebugs я вижу, что js загружается на страницу. Я снова вижу пару часов, и я вернулся.

Но проблема такая же, сценарий не загружается. Что я делаю неправильно?

Спасибо в продвинутом состоянии.

Answer 1

Я не совсем уверен, что здесь происходит, но если вы не получите эту работу, я могу посоветовать использовать jquery backstretch. Я использовал его сам пару раз в проектах, и он всегда выполняет свою работу.

Answer 2

Пара вещей, не нужно вставлять jquery, в комплекте с ядром WordPress, и все файлы будут доступны, если вы правильно настроите свой javascript. В вашем functions.php, убедитесь, что вы обернуть его в вызове Действия так:

add_action('wp_enqueue_scripts','my_scripts_function'); 
function my_scripts_function() { 
    wp_register_script('jquery.anystretch.js', get_template_directory_uri() .'/js/jquery.anystretch.js'); // you don't need the third parameter here 
    wp_enqueue_script('jquery.anystretch.js'); 
} 

В идеале, вы бы просто епдиеим другой яваскрипт собственного файл, а не положить в header.php, но он будет работать иногда делать это так. Ваша проблема была дополнительной функцией() wrap, я полагаю, не вижу необходимости в ней.

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
    $('.imgheader').anystretch("images/image.png"); 
}); 
</script> 

Если это не работает, убедитесь, что JQuery и anystretch загружаются на странице, которую вы пытаетесь запустить их.

Answer 3

Я попробовал по-разному с несколькими плагинами jquery, такими как jquery.ez-bg-resize, jquery.backstretch, jquery.anystretch. Даже сейчас я не могу понять, почему это так. Для этих плагинов js загружается, но результат тот же. Моя проблема не решена. Тогда я решил сделать это с помощью css для медиа-запросов, для этого таким образом проблема была решена примерно.

imgheader { background: url("images/images.png") 50% 50% no-repeat scroll !important; 
    background-position:center; 
    background-size: cover; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover;