fullscreen backgrounds scolls after window resize

[crz_06]

I have a fullscreen bg image, and I noticed that the bg image scrolls with the content on the page. This is my css and I think it should have fixed it, but for some reason it doesn’t. Any feedback is much appreciated!

#full-screen-background-image {
z-index: 0;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;
background-size: cover;

/* Set up positioning */
position: fixed;
top: 0;
left: 0;

background-attachment: fixed;
}

[Paulie_D]

That set of properties doesn’t seem to include a background image.

Perhaps you could show us a cut down example in Codepen.io

https://css-tricks.com/perfect-full-page-background-image/

[crz_06]

.slides {margin: 0; padding: 0; list-style: none;}

<ul class="slides" >
                <?php foreach ($nodes as $slide) { ?>
                        <li style="background:url(<?php echo "http://" . $_SERVER['HTTP_HOST'] . "/sites/default/files/styles/front_bg_image/public/statement-img/"; ?><?php print render($slide->field_slide_image['und'][0]['filename']); ?>) no-repeat center center fixed;">
                                    
                        </li>
                            
                <?php } ?>
                </ul>

[Paulie_D]

No use posting your PHP.

We need the output HTML & CSS in Codepen

[Author]

Posts