Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #236561

    Dear friends,

    is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?
    I want the images to display completely no matter what width and height of the image. Scaling the browser will in that case show gaps when using images of various height and width, but that is exactly what I want.

    THNX in advance


    Hey station1!

    Can you post the link to your website so we can take a look? Which version of Enfold are you using? If not 2.6.1, please update it ( see – ). You can choose to display Transparent header on selected pages with the latest version

    Best regards,


    By the way, I tried to update but on alle pages a gap appeared at the top of the page.
    I’m using the page setting NO HEADER NO FOOTER.



    Can you try uploading your image in 1920x1080px?




    that would work for landscape images, but most of the images don’t fit, because they are different in size.
    I’ve seen in another theme (but which one?) that the images always tried to fit the max width or the max height.
    In that way images are always displayed complete. As said I don’t mind the gaps that will appear.



    Hi Yigit,

    I found an example of what I meen. It’s a plugin from Codecanyon.
    Look at this:
    If you click on an image, and resize your browser in both ways up and down, the image will be visible no matter what.
    I want this behavior in the fullscreen slider from enfold.

    Hope you can help me and my client

    Greetings Eric



    No, this is currently not possible. You can try to use the lightbox and the “expand” image button to create such an effect.



    Since i stumbled over this thread while searching for the same functionality, i will leave my solution here. Not sure, wether there might be an even easier solution, since it is 2020 already and the post is 6 years old. At least this works for me:

    “is there a possibility to always display the entire image in the full screen slider, without cutting off parts of the image?”

    add a custom css name to your fullscreen slider element, e.g. “custom_fs_slider” (under edit > advanced > developer settings > custom css class).

    Add this code to quick css:

    .custom_fs_slider .avia-slideshow > ul > li {
        background-size: contain !important; /* resizes the background image to the size, where it fills the container in one direction, but without cropping the image on the other direction. aspect ratio is being maintained */
        background-repeat: no-repeat !important; /* makes sure, that only one instance of the picture is visible */
        /* general note: this makes most sense, when the background color of your picture is either transparent or has the same color of the background, so that you do not see borders of the background image */

    Hope this helps someone. Cheers, Stefan

    • This reply was modified 4 years, 3 months ago by thatsmyname.

    Hi Stefan,

    Thanks for sharing your solution, it’s much appreciated :-)

    Best regards,

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