[Support request] How to set width and height for background image in a container

Home Forums Support [Support request] How to set width and height for background image in a container

Home Forums Support How to set width and height for background image in a container

  • This topic has 15 replies, 2 voices, and was last updated 5 months ago by Fernando.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2154859
    Babak

    Hi;
    I am trying to set width and height to a background image for a container to avoid cumulative layout shift. I would really appreciate it if you could look at the page and tell me the best approach.
    In my element, the more I increase the container’s padding on top and bottom, the lesser the cumulative layout shift. So if I go 200 on top and 200 on the bottom, I get the minimum amount of shift, but this much padding ruins the layout.
    Thanks for the help in advanced

    #2154872
    Fernando
    Customer Support

    Hi Babak,

    Are you referring to this specific Container?: https://share.getcloudapp.com/eDu5o6qP

    I tried testing your website and I couldn’t seem to replicate the CLS issue for a specific container with a Background image: https://share.getcloudapp.com/YEur819L

    May we know how you’re testing your site for CLS? I tested your site through Google Chrome’s Lighthouse tool on incognito to generate the most accurate performance result.

    See: https://developers.google.com/web/tools/lighthouse

    Or perhaps you’re referring to a different container?

    Kindly let us know. Hope to hear from you soon. 🙂

    #2154876
    Babak

    Hi Fernando;
    Please look at this page
    https://ivl.seotow.com/boosters/
    under the menu, there’s an image of a swimmer. This is actually an element I created and suppose to show an image below the menu. In this element, I created a grid a container and set the image you see as the container’s background image, and this is the exact image creating the cumulative layout shift.
    Hope I can explain the problem correctly.

    #2154903
    Fernando
    Customer Support

    How are you testing your site? I tried testing your website multiple times again, and I couldn’t seem to replicate the issue.

    See: https://share.getcloudapp.com/geum0wWY

    Also see for another test: https://share.getcloudapp.com/lluEzJJp

    It seems that the more significant issue is server response time.

    Here is an article you may refer to for further assistance with regards to this: https://www.cloudways.com/blog/reduce-server-response-time-wordpress/

    Also see: https://onlinemediamasters.com/reduce-server-response-time-wordpress/

    Also this response by Elvin: https://generatepress.com/forums/topic/reduce-initial-server-response-time/#post-1518385

    Trying an Optimization plugin like WP Rocket might also help.

    Hope this clarifies. 🙂

    #2154907
    Babak

    It is not about the site but about the child pages, I am trying to add the image below the menu.
    This is my testing tool, please click on the link

    https://pagespeed.web.dev/report?url=https%3A%2F%2Fivl.seotow.com%2Fboosters%2F

    Cumulative Layout Shift
    0.24

    #2154910
    Babak

    Here’s the cumulative layout shift I am talking about. This is done by chrome lighthouse

    #2154937
    Fernando
    Customer Support

    Thank you for including a link to your Test and adding a screenshot.

    I can see that from your test, the CLS is coming from this: https://share.getcloudapp.com/kpuJy5nR

    Do you have a Caching/Optimization plugin? The problem may be coming from the optimization of CSS and lazy loading of images.

    Can you try disabling this and check again?

    Hope to hear from you soon. 🙂

    #2156146
    Babak

    Yes, I disabled and still the same! What you are pointing to in the image are 3 different elements created by grids and containers and do not act like this on the front page of the site!
    I am really puzzled but from my test, if I increase the top element’s padding to 200 top and 200 bottom the problem almost disappears. Back to my initial question, is there any way to assign width and height to the container’s background image?

    #2156194
    Fernando
    Customer Support

    I see. As is, the background image already has a defined height and width which is computed through background-size: cover. Moreover, modifying this should have no effect with regards to CLS as this is just a background image and not an Image element itself which actually takes up space. The image “size” of this background image or the space it takes up relative to other Blocks is based solely on the size of its container.

    Here is a code you may try to manually input a background image “size” for mobile:

    @media (max-width: 768px) {
        /* CSS in here for mobile only */
            .gb-container.gb-container-c2ae02ca {
            background-size: 400px 200px;
        }
    }

    Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css

    Adding it through additional CSS should work.

    Moreover, I tried testing again and got the same result: https://share.getcloudapp.com/bLuKpogG

    Also tried through web.dev: https://share.getcloudapp.com/04uEkeRw

    Also see: https://share.getcloudapp.com/mXuY7oDy

    I also tried checking the CLS out manually by using Slow 3G network on my test and this is what I found: https://share.getcloudapp.com/bLuKpoZb

    As shown at around 8 seconds in the screen recording, it seems that the spacing of this form for instance are being loaded late. This goes back to how your site is being optimized.

    Kindly see David’s response here: https://generatepress.com/forums/topic/cls-and-grid-container-issue/#post-1728508

    To be sure can you try number 1 here: https://docs.generatepress.com/article/debugging-tips/

    Kindly let us know how it goes. Hope we get to the bottom of this as soon as possible. 🙂

    #2156201
    Babak

    Thanks a lot for your help. I have to check and see why these three elements placed after each other are creating this effect. Please mention, regarding the optimization plugin, I am using the same exact elements and same exact optimization plugin on the front page of the same site but no cumulative shift.

    #2156249
    Fernando
    Customer Support

    I see. One factor may also be that you’re preloading a lot of CSS. Can you try preloading only your fonts and maybe images above the fold?

    Then, try aggregating all other CSS into one cached file and see how it goes.

    Hope this helps. 🙂

    #2157217
    Babak

    OK, the optimization plugin is gone, but still, the problem is there!
    The child page and front page have the same configuration with elements but the front page is doing 97 and child page 88 with 0.415 shift.
    I cannot think of anything do you have any suggestions?
    Almost ready to cry now…

    #2157226
    Babak

    FOUND IT…
    If you look at the child pages you see that I am using the Themify Product Filter plugin and that’s creating the shift. I place the shortcode in a container and use it as an element on the page.
    Is there any way to prevent the shift now?

    #2157308
    Fernando
    Customer Support

    Great! Glad you were able to figure out the specific cause of the issue!

    I could also see it how it could potentially cause CLS testing from my end: https://share.getcloudapp.com/KouAQo4N

    With that said, it would be best to reach out to the support of this plugin for a fix, or you may also try a different filter plugin.

    Moreover, with the current state of the site with nothing preloaded, I tried testing again and noticed that the CLS no longer existed.

    Lighthouse: https://share.getcloudapp.com/qGu7zeWP

    web.dev: https://share.getcloudapp.com/JruOwrRE

    Maybe trying a different optimization plugin like: https://wordpress.org/plugins/autoptimize/

    or WP Rocket, with settings: https://docs.generatepress.com/article/configuring-autoptimize/

    might help with the issue as well.

    Hope this helps! 🙂

    #2157326
    Babak

    Thanks a lot for continuing and helping me. Just for the record and if incases there’s someone else runs into this problem, it is worth saying that if I have the finder element on top of the page below the image then it creates the problem but if I push it down the page then the same plugin will not cause any issue at all.
    Again thanks for your help and I thought you should know about it too.

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