make page background fullscreen

[nvdwolk]

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

[giudev]

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.

[Redfredg]

//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”);
`

`

});

[Author]

Posts