Skip to main content

Forums

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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #244597
    nvdwolk
    Participant

    Hi,

    I’m trying to get the background full screen, created with Layer Slider Pro plugin for WordPress. Now the header is seperate from the background.

    http://lucengelhard.helpmeverder.nl/

    Can anyone please provide me a bit of css code which will cover that? I can’t work it out myself.

    Thank you in advance!

    Kind regards
    Niels

    #244599
    giudev
    Participant

    this is the code you need

    .your-background-class {
         background-image: url('http://lucengelhard.helpmeverder.nl/wp-content/uploads/2016/08/achtergrond_test-1.jpg');
         background-size: cover;
    }
    

    But you need to get rid of that img tag for the background should be assigned width the background-image css property.
    To calculate the height of your slide you could use

    height: calc( 100vh - $headerHeight );
    

    First replace “$headerHeight” with the proper height in pixels.

    #244603
    Redfredg
    Participant

    //HTML

    //CSS
    #bg {
    position: fixed;
    top: 0;
    left: 0;

    /* Preserve aspet ratio */
    min-width: 100%;
    min-height: 100%;
    }
    Redgage
    OR

    img.bg {
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1024px;

    /* Set up proportionate scaling */
    width: 100%;
    height: auto;

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

    @media screen and (max-width: 1024px) { /* Specific to this particular image /
    img.bg {
    left: 50%;
    margin-left: -512px; /
    50% */
    }
    }

    OR

    //HTML

    //CSS
    #bg { position: fixed; top: 0; left: 0; }
    .bgwidth { width: 100%; }
    .bgheight { height: 100%; }

    //jQuery
    $(window).load(function() {

    ` var theWindow = $(window),
    $bg = $(“#bg”),
    aspectRatio = $bg.width() / $bg.height();

    `function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }
    

    }

    theWindow.resize(resizeBg).trigger(“resize”);
    `

    `

    });

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