Mobile web design HTML ul affecting image below it when rotating device

Question

Hi I am having issues with my website. It runs fine on computers but on mobile devices the price table I am using is affecting the image below it. The price table is within a ul class when I look at the picture below it portrait then switch to landscape the image disappears. If I taken out all the price tables the image will rotate on mobiles and not disappear. So I know that the ul class is affecting the image but I dont know how to fix it.

    <ul class="pricing_table">

            <li class="price_block">
            <h3><h3>Mini Facial </h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 15</span>
                    <span class="price_tenure">30 minutes</span>
                    <span class="price_tenure">All Skin Types</span>

                </div>
            </div>  

        </li>

        <li class="price_block">
            <h3><h3>Facial</h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 24</span>
                    <span class="price_tenure">1 Hour</span>
                    <span class="price_tenure">All Skin Types</span>

                </div>
            </div>  
        </li>

        <li class="price_block">
            <h3><h3>Back Facial</h3></h3>

            <div class="price">
                <div class="price_figure">
                    <span class="price_number">&pound; 26</span>
                        <span class="price_tenure">30 minutes</span>
                        <span class="price_tenure">All Skin Types</span>
                </div>
            </div>  

        </li>


</ul>

    <a name="barbering"></a>
                        <section class="photo5" data-stellar-background-ratio="0.5">
                    </section>

css

    @import url(http://fonts.googleapis.com/css?family=Ubuntu);

    * {
        margin: 0; 
        padding: 0px;
    }

    body {
        font-family: Ubuntu, arial, verdana;

    }

    .pricing_table {
        line-height: 150%; 
        font-size: 12px; 
        margin: 1px auto; 
        width: 75%; 
        max-width: 800px; 
        padding-top: 10px;
        margin-top: 50px;

    }

    .price_block {
        width: 100%; 
        color: #8bbab4; 
        float: left; 
        list-style-type: none; 
        transition: all 0.25s; 
        position: relative; 
        box-sizing: border-box;

        margin-bottom: 10px; 
        border-bottom: 1px solid transparent; 
    }

    .pricing_table h3 {
        text-transform: uppercase; 
        padding: 5px 0; 
        background: #FFFFFF; 
        margin: -10px 0 1px 0;
    }

    .price {
        display: table; 
        background: #FFFFFF; 
        width: 100%; 
        height: 70px; 
    }
    .price_figure {
        font-size: 24px; 
        text-transform: uppercase; 
        vertical-align: middle; 
        display: table-cell;
    }
    .price_number {
        font-weight: bold; 
        display: block;
    }
    .price_tenure {
        font-size: 11px; 
    }

    .features {
        background: #8bbab4; 
        color: #8bbab4;
    }
    .features li {
        padding: 8px 15px;
        border-bottom: 1px solid #8bbab4; 
        font-size: 11px; 
        list-style-type: none;
    }

    .footer {
        padding: 15px; 
        background: #8bbab4;
    }
    .action_button {
        text-decoration: none; 
        color: #8bbab4; 
        font-weight: bold; 
        border-radius: 5px; 
        background: linear-gradient(#8bbab4, #8bbab4); 
        padding: 5px 20px; 
        font-size: 11px; 
        text-transform: uppercase;
    }
    .price_block:hover {
        box-shadow: 0 0 0px 5px rgba(0, 0, 0, 0.5); 
        transform: scale(1.04) translateY(-5px); 
        z-index: 1; 
        border-bottom: 0 none;
    }
    .price_block:hover .price {
        background:linear-gradient(#8bbab4, #8bbab4); 
        box-shadow: inset 0 0 45px 1px #FFFFFF;
    }
    .price_block:hover h3 {
        background: #222;
    }
    .price_block:hover .action_button {
        background: linear-gradient(#8bbab4, #8bbab4); 
    }

    @media only screen and (min-width : 480px) and (max-width : 768px) {
        .price_block {width: 50%;}
        .price_block:nth-child(odd) {border-right: 1px solid transparent;}
        .price_block:nth-child(3) {clear: both;}

        .price_block:nth-child(odd):hover {border: 0 none;}
    }
    @media only screen and (min-width : 768px){
        .price_block {width: 25%;}
        .price_block {border-right: 1px solid transparent; border-bottom: 0 none;}
        .price_block:last-child {border-right: 0 none;}

        .price_block:hover {border: 0 none;}
    }

.photo5{
background: url(barbering.jpg);
    background-size: cover;
    width: 100%;
    height: 550px;
    top: 48px;
    overflow: auto;
    background-repeat: no-repeat; 
}

Answer 1

It's not ul fault, it's parallax plugin. When you scroll down on portrait view it change background position to some value using javascript. Then you rotate your device to landscape and value that was set up by plugin is still the same even if distance form the top of the page to your container with picture has changed.