Z-Index

  • Resolved a223123131

    (@a223123131)


    3 years, 9 months ago

    I have read through your documentation with the z-index. But can’t get it working.

    I have a background Image and a text in front. Now I want to delete the background image and set a normal image with z-index 1 while the text should have z-index 2.
    From my understanding the image should be now behind the text (like an background image)… but the image is still in the next line below the text.

    The reason behind is, that I have a plugin which displays jpg and png as webp if the browser is supporting it. This is working in the tag, not on the background-img tag.

    What can I do to place a normal in the background of a slider?

    • This topic was modified 3 years, 9 months ago by a223123131.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Support Gabor

    (@nextendweb_gabor)

    Hi @a223123131!

    In default positioning when you put down layers, they are making sure, that they won’t go behind or front of other layers, that is why they will go under each other. When you want to have layers behind each other, you need to use absolute positioning:

    so you should put down your image layer this way.

    Thread Starter a223123131

    (@a223123131)

    Thanks for the video Gabor. This is working great!

    Another effect I can see…

    1. Having a background image serves the image as jpg or png like I uploaded it. With this I have a pagespeed insight score from google for mobile of 71.

    2. Having no background image and serving a normal image layer with the z-index plaacing it in the background serves a data-image and I get a score of 94 for mobile on PSI.

    However, with the 2nd option I can’t get the image streched the the size of the layer. The ration with/high is allways correct which ends in a white space in the layer. As in the video mentioned backgroudn image is the better solution.

    The PSI score is by far better and the best thing is, that the “Largest Contentful Paint” (which is a Web Vitals Score) is much much better as well as CLS (which is another Web Vital Score)

    What do you suggest? Is there a way to strech an image to the with and high of the layer by changing the image ratio? …or is there a way to serve a background image as a data-image which sounds better for me?

    • This reply was modified 3 years, 9 months ago by a223123131.
    • This reply was modified 3 years, 9 months ago by a223123131.
    • This reply was modified 3 years, 9 months ago by a223123131.
    • This reply was modified 3 years, 9 months ago by a223123131.
    Plugin Support Gabor

    (@nextendweb_gabor)

    Your problem originates from, that an area can only be covered by background-image CSS code, which is used in our background images, while an image layer is an img html element. You can’t really have the behavior of a background-image CSS by an image layer (nor the other way around), so if you want a given width and height for that image, you need to use an image editor to cut out the image in that size. After that what I suggest is, that you should have the top layer as an absolute layer too, because absolute and default layers are moving and resizing differently, so if you want to always have them connected to each other, you should use absolute positioning on both of them.

    If you would need more help with this, please send us an export of your slider:
    https://smartslider.helpscoutdocs.com/article/1728-export-import-slider
    https://smartslider3.com/contact-us/support/?topic=Editing&platform=WordPress&version=Free&slider-export=slider-yes
    and we will take a look at its design!

    Thread Starter a223123131

    (@a223123131)

    I’m happy with the bahavior of the background image… no reason to change. But, hold on, there is a performance issue compared with the normal image. Is ist possible to get the background image served as a data-image like the normal image?

    My real thing is the performance issue and the Web Vitals.

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @a223123131

    The background image is added using a div element with CSS background-image property:
    https://www.w3schools.com/cssref/pr_background-image.asp
    not an img tag:
    https://www.w3schools.com/tags/tag_img.asp

    Could you tell us what performance issue do you experience exactly with background images? Maybe could you send us about the message you receive? ( Feel free to upload the image to an image sharing site like Imgur )

    Best regards,
    Laszlo.

    Thread Starter a223123131

    (@a223123131)

    I think full webp support (with fallback for browsers not supporting webp) will buy into the Web Vitals improvements !!

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @a223123131

    Actually we are already working on some improvements for Web Vitals, and that will include some webp related improvements as well.

    But we still need some time until we are able to release a version that contains all of those modifications, since:
    -we are still working on some additional improvements
    -and the improvements that we have already implemented brought a lot of changes in our codes, so they require a lot of testing as well.

    Best regards
    Laszlo.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Z-Index’ is closed to new replies.