kreoTech

Если имеется ввиду вообще закрасить поверхность всю или фон тогда использовать after или before с абсолютным позиционированием и соответствующим окрашиванием.

Если же надо чтобы картинка однотонная меняла свой цвет при действиях пользователя. Тогда есть вариант просто сделать png картинку прозрачную на белом фоне. А фон блока заливать соответствующим событию цветом. Это если одной картинкой.

Было:

<?php if (have_posts()) : while (have_posts()) : the_post();?>
                                
                                <li class="slide-reviews showing-reviews">
                                    <img src="<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $image_url[0]; ?>">
                                    <h4><?php the_title(); ?></h4>
                                    <?php the_content(); ?>
                                </li>
                                
                                <?php endwhile; else: ?>
                                <?php endif; ?>

Стало:

<?php var i=0;?>
<?php if (have_posts()) : while (have_posts()) : the_post();?>
                                <li class="slide-reviews <?php (i==0)?'showing-reviews':'';?>">
                                    <img src="<?php $image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full'); echo $image_url[0]; ?>">
                                    <h4><?php the_title(); ?></h4>
                                    <?php the_content(); ?>
                                </li>
                                <?php i++; ?>
                                
                                <?php endwhile; else: ?>
                                <?php endif; ?>

Принцип такой.

Задать viewport в head секции index.html:

<meta name="viewport" content="width=device-width, initial-scale=1">

Я для таких целей обычно использую fullPage

Устроит так

Скорее нет, чем да.
Javascript должен включаться в работу только при скролле. Отступ должен быть рассчитан либо ранее, либо вообще хеадер должен находиться в статическом позиционировании до работы скрипта. Иначе если скрипты у посетителя выключены, буду неустранимые портаки в отображении сайта. Причем на всех страницах.