Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS fullscreen backgrounds scolls after window resize

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #167899
    crz_06
    Participant

    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;
    }

    #167901
    Paulie_D
    Member

    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/

    #167902
    crz_06
    Participant

    .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>
    #167904
    Paulie_D
    Member

    No use posting your PHP.

    We need the output HTML & CSS in Codepen

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.