I am attempting to instantly switch my background image in wordpress with respect to the site visitors display size. If he/she's a giant screen, he/she will get the large version from the image. When the screen is small, he/she will get the more compact version. (Only for loading time reduction. The look is going to be resized to fill the screen later on, but that is already working.)

What is not working may be the check wether or otherwise the more compact version even is available. Whether it does not exist, the script should fall to the larger version and merely use that image. I recieve experience image, but it is just the large one (wordpress area title "BG_value". The link to the little image is saved in "BG_value-medium").

The pictures Are available and also the pathways passed with the wordpress fields are fine, too, to ensure that isn't the problem. :/

But, without further ado, I present the code (from the header.php from wordpress).

<!-- Wordpress Loop -->
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <script type="text/javascript">
        if (($(window).width() < 1340) && (<?php 
                                                if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true))){
                                                    echo "true";
                                                    echo "false"; } ?> )){
            <?php $bgimg = get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>
        } else {
            <?php $bgimg = get_post_meta($post->ID, 'BG_value', $single = true); ?>
    <div id="bgimage"> <img class="stretch" src="<?php bloginfo('template_url'); ?><?php echo $bgimg; ?>" alt="" /> </div>
<?php endwhile; endif; ?>

I apologize if the looks a little untidy, I have been focusing on this during the last couple of hrs, altering it again and again again.

Any ideas what is going on wrong here? Check out the page

I have attempted to wash up that mess to determine what's happening. This is untested, but when something does not work now you can atleast understand why it does not work.


if (have_posts()) {
    while (have_posts()) {

        echo '<script type="text/javascript">';

        $url = bloginfo('template_url');
        $img = get_post_meta($post->ID, 'BG_value-medium', $single = true);
        $file_exists = 'false';
        if (file_exists($url.$img)) {
            $file_exists = 'true';

        echo 'var bgimg = '.get_post_meta($post->ID, 'BG_value', $single = true).';';
        echo 'if ($(window).width() < 1340 && '.$file_exists.') {';
        echo '  bgimg = '.get_post_meta($post->ID, 'BG_value-medium', $single = true).';';
        echo '}';

        echo '$("#bgimage").attr("src", bgimg);';

        echo '</script>';


You've got a large logical error within this. You need to set the bg image by having an javascript function, however, you never attempt to place it with javascript, just with an php echo. Have a look in the sourcecode of the javascript snippet inside your browser, and you'll see what i'm saying.

You need to keep image-pathes in javascript variables within the then and else, and employ these to set the bg image.


<script type="text/javascript">
    if (($(window).width() < 1340) && (<?php if(file_exists(bloginfo('template_url').get_post_meta($post->ID, 'BG_value-medium', $single = true)))){
                                                echo "true";
                                                echo "false"; } ?> )){
        var bgimage="<?php echo get_post_meta($post->ID, 'BG_value-medium', $single = true); ?>";
    } else {
        var bgimage="<?php echo get_post_meta($post->ID, 'BG_value', $single = true); ?>";


<div id="bgimage"><img id="bgimageimg" class="stretch" src="" alt="" /></div>