Avada Forums Community Forum Setting background to browser window size, regardless of page size

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • MrRudi
    Participant
    Post count: 1

    So I recently upgraded from a very early Avada version (pre 3xxx) to the latest version, did the whole conversion and fixed my custom PHP to work with the new Fusion tags. That was some work, but in the end I got it all working again.

    However, in the older Avada I had a background image that was always scaled to the window size of the browser, so even on pages that were not very ‘high’ vertically, the background image would still be full size and scale to the window. In the new Avada version the background image will never expand to below the page footer, no matter what I do. So on small pages half my screen is just grey…

    Does anyone know how to fix this? Nothing I do in the theme options or fusion container / page settings seems to help.

    cnash6
    Participant
    Post count: 3

    Did you ever figure out a fix to this? Having the same problem…

    Thanks!

    marklchaves
    Participant
    Post count: 873

    Interesting.

    I would check to see if your background image size is set to contain for some reason. If so, change the CSS to be cover instead the re-test.

    As far as making sure the container stays the full height of the viewport, check your container settings, or you can use jQuery, or even CSS viewport units.

    Grep on Avada Container 100% Height

    https://theme-fusion.com/documentation/fusion-builder/elements/container-element/

    Viewport Units Reference From MDN

    Sizing things according to the viewport can be useful in your designs. For example, if you want a full page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled.

    Here’s a live demo using height: 100vh;

    https://codepen.io/marklchaves/pen/NQbLEa

    In this demo, I have the jQuery commented out. You can play around with commenting out the 100vh and uncommenting the jQuery. Viewport units may not be be supported on every browser yet. You can also see how I set background-size: cover;

    https://caniuse.com/#search=vh

    Good luck!

    rhms
    Participant
    Post count: 1

    Same issue as TO stated here. I can not use Page->PageOptions->Background->Background Image For Page. An image configured here does not show up. Searched the source code of the page, but no occurance of the url to the image.
    All i want to achive is a page (100%-template) with a bbackground that is fully covering the view port.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.