Вы можете использовать

@media screen and (max-width: 1410px){
    //Add CSS here
}

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

Вам не нужно javascript, если вы не хотите делать то, что CSS не может сделать.

Редактировать: после публикации вашей скрипки, я считаю, что это то, что вы искали: FIDDLE

В принципе, вам просто нужно поместить изображение в контент и установить стиль вправо: -360px;

В конце концов, нет необходимости в Jscript. Надеюсь, это то, что вам нужно.

Редактировать # 2: поцарапать, что, перекрывая остальную часть содержимого, дайте мне посмотреть, смогу ли я это исправить.

Редактировать # 3: Это должно сделать трюк сейчас... Так как у меня нет CSS в скрипке, вот скриншот того, что я сделал.

Я удалил z-индекс из содержимого панели

Из вашего вопроса и комментариев видно, что ваш образ находится внутри элемента вашего html, который позиционируется относительно. В этом случае ваше изображение будет абсолютно помещено в его родительский объект (относительный объект). Этот пост в CSS Tricks объясняет это хорошо. Все, что вам нужно сделать, это перемещать изображение за пределы его контейнера, и оно должно работать.

(Я бы опубликовал это как комментарий к ответу @snaplemouton, но у меня пока нет репутации.)

Если вы хотите придерживаться своего подхода, проблема заключается в синтаксисе в функции moveImage. Вам не хватает фигурных скобок и использование комы вместо точки с запятой.

Изменить строку:

$p1img.css('right', '-' + $pos + 'px');

к этому:

$p1img.css({'right':'-' + $pos + 'px'});

и он должен работать.

Не могли бы вы использовать ширину, установленную для определенного процента?

В противном случае просто проверьте ширину браузера и соответствующим образом измените. У вас есть скриншот или jsfiddle для дальнейшего уточнения ваших намерений?

И почему бы не использовать jquery resize()? (http://api.jquery.com/resize/)

Решение @snaplemouton является наилучшим решением.

Используя Javascript, вы можете вызвать проблемы, ваш браузер и контент будут время от времени мигать при изменении размера и т.д. И вы используете слишком много процессов, которые не нужны.

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

Пожалуйста, взгляните на эту статью: http://css-tricks.com/css-media-queries/

Медиа-запросы позволяют легко изменять css вашего контента на основе размера браузера и даже типа носителя, такого как мобильный и т.д.

Так как snaplemouton, упомянутый выше:

@media screen and (max-width: 1410px){
    .panel-image-1{
        width: 50%;
        height: 50%;
    }
}

В основном говорит, что если экран меньше 1410 пикселей, измените мое "детективное изображение" на 50% ширину и 50% высоты.

Кроме того, ваше изображение не должно быть тегом изображения. Если вы используете изображение строго для дизайна, это не добавляет ценности для контента, вы должны включить его через css, а не html.

Вариант один:

body{
position:relative;
}
img{position:absolute;right:0px;bottom:0px;}

Теперь просто управляйте окном (телом), как вы хотите, и изображение будет следовать

Второй вариант:

body{background-image:[your image]; background-position:90% 90%; background-size:10% 10%;}

Вам нужно будет снова управлять позиционированием окна/тела, как вы хотите. И измените проценты в зависимости от размера, которым вы хотите, чтобы изображение было.