Home Forums Community Forum How can I create a background image that appears in full on all devices?

Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • tpedder
    Participant
    Post count: 1

    Hi – hoping to get some help on how to make my container background image appear in full on small and medium devices the exact same way it appears on large screens or as close as possible. Right now when viewed on small & medium screens, it zooms right into the middle of the image and is not recognizable as the same picture on the large screen view.

    I’ve found various topics and read that it is expected and commonplace in web design (and is described by Theme Fusion under the title of ‘Fusion Builder Container Image Sizes’ Here:
    https://theme-fusion.com/documentation/avada/images/image-size-guide/

    A key reason i’m trying to get this working is to keep the background image with a number of other elements appearing over the top (text and content etc). Is there a way I can achieve the full background image on all devices?

    Any help would be appreciated!
    Tim

    marklchaves
    Participant
    Post count: 675

    Read up on responsive web design. Specifically responsive background images with art direction. I’ve answered similar questions on this forum. It’s a popular topic. You might want to do another search to find them. In the mean time, here are a couple examples to get you started.

    Here’s a live demo with code that implements about four breakpoints to maintain art direction for a hero image.

    https://marklchaves.com/responsive-banner-hero-image-demo/

    I did this for someone on this forum. They never replied, but I saw that they implemented my design successfully on their site.

    Note: I originally used Fusion Sliders for this demo. But, I ripped out all the Fusion Sliders on my site for performance reasons. So, I ported the code to this non-slider version. Therefore, this code can be use with/without sliders.

    Here’s a slightly different technique I did for another post in this forum.

    Full View
    https://codepen.io/marklchaves/pen/yWZZQa

    Editor View
    https://codepen.io/marklchaves/pen/yWZZQa

    Reading
    https://cloudfour.com/thinks/responsive-images-101-definitions/

Viewing 2 posts - 1 through 2 (of 2 total)
Only users with a registered purchase of Avada can post to the community forum. Please register your purchase here.