Parallax in WordPress

Question

I have the following parallax code in my page-parralax.php file:

get_header(); ?>

<?php
    $args = array(
        'post_type' => 'parallax',
        'order' => 'ASC',
        'orderby' => 'menu_order'
        );
    $parallax = new WP_Query($args);
        while($parallax->have_posts()) : $parallax->the_post();

        $parallaxImage = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
        $breakUrl = str_replace('http://localhost/themes', '', $parallaxImage[0]); ?>

        <div class="wrapper">

    <div class="container">
        <div id="clearfix">
            <section class="parallax" id="section_<?php echo the_ID(); ?>" style="background: url('../<?php echo $breakUrl; ?>') fixed;"></section>
            <section id="section_<?php echo the_ID();?>" class="parallax" style="background: url('../<?php echo $breakUrl; ?>') fixed;"></section>

        <div class="parralax-container">
            <h2><?php the_title(); ?></h2>
            <div class="page-content">
                <?php the_content();?>
            </div>
        </div>
        </div>
    </div>

    </div>
<?php 
    endwhile;
    wp_reset_postdata();
    get_footer(); 
?>

But when I try to see it, it returns the following error:

GET http://localhost/themes/index.php/wp-content/uploads/2015/10/macbook_overview_og-700x700.jpg 404 (Not Found) for each image.

If i change it in the console afterwards to:

http://localhost/themes/wp-content/uploads/2015/10/macbook_overview_og-700x700.jpg it displays correctly.

Is it because I am using localhost it creates this error?

Answer 1

You got to go deeper upper:

background: url('../..<?= $breakUrl; ?>')

I've removed the trailing slash, as your URL starts with it. Also you might consider setting up <base> URL and working with relative URLs from the start.