2

I'm trying to make a couple of changes to the HTML5UP Highlights site. You can see from the preview here https://html5up.net/highlights that as you scroll down to the next section of the page the background image changes like this:

enter image description here

Then if you resize the window the original background image is displayed and the second image becomes included in the content like this:

enter image description here

I'm trying to work out how the background image changes in the first screen shot. I'm trying to always show the original background as in the second screenshot regardless of screensize and always include the sub images in the content. Basically I'm trying to emulate the second screenshot in all screen sizes.

I can see there are these sections in the CSS for different screen sizes:

 @media screen and (max-width: 980px) {    
    .main .image.primary {
                        display: block;
                        margin: 0 0 4em 0;
        }
    }

So I've changed this for the Main version too and commented out display:none.

.main .image.primary {
        /*display: none; */
        display: block;
        margin: 0 0 4em 0;
    }

This seems to add the content images regardless of screenshot but I can't work out what changes the background image on screen resize?

1 Answer 1

1

1st part: remove the background transition

To disable the background transition effect, look in your assets/js/main.js file. You'll find a part title with the comment // Main sections. (line 156+). A little lower, You'll find the following:

// Create bg and append it to body.
    $bg = $('<div class="main-bg" id="' + $this.attr('id') + '-bg"></div>')
        .css('background-image', (
            'url("css/images/overlay.png"), url("' + $primaryImg.attr('src') + '")'
        ))
        .appendTo($body);

This creates an element for the background image, that depends on the current element.

And after that, You'll find the code to add/remove this element with or without transition (line 194+):

if (skel.canUse('transition')) {

    options.init = function() { $bg.removeClass('active'); };
    options.enter = function() { $bg.addClass('active'); };
    options.leave = function() { $bg.removeClass('active'); };

}
else {

    $bg
        .css('opacity', 1)
        .hide();

    options.init = function() { $bg.fadeOut(0); };
    options.enter = function() { $bg.fadeIn(400); };
    options.leave = function() { $bg.fadeOut(400); };

}

You can just delete or comment that part, and the transition effect should be gone.

2nd part: always show the content images

Here you already found the correct place in the assets/css/main.css file. Just set

.main .image.primary {
    display: block;
}

and remove the min-height property:

.main .container:before {
    /*min-height: calc( 100vh - 13em );*/
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
}

No everything shoud work as your second screenshot.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.