Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 1, 2022 at 1:52 pm #1367197
    Alwin

    – It seems to me that when I insert a custom background image in a Color Section that it is not possible to use webp images for that? Only jpeg and png?

    – Is it possible to hide a custom background image in a Color Section for mobile view?

    Thanks for the help :)

    Best Wishes,
    Alwin

    October 1, 2022 at 6:34 pm #1367207
    Mike

    Hey Alwin,
    Thanks for your question, webp images work fine as color section background colors, please see my test page below.
    For the same top color section on my test page I added this css which hides the background image and allows the orange background color to show on mobile:

    @media only screen and (max-width: 767px) { 
#av_section_1.avia-section {
	background-image: none;
}
}

    If you have trouble with this css on your site please link to your test page so we can advise.

    Best regards,
    Mike

    October 2, 2022 at 1:12 pm #1367311
    Alwin

    Hello Mike,

    Please take a look at https://www.option-webdesign.nl

    There are 2 background pictures that are both not displayed as webp but as png format.

    Thanks,
    Alwin

    October 2, 2022 at 2:45 pm #1367313
    Mike

    Hi,
    I assume that you are referring to the image below, and I see that it is a .png image in the link did you try entering a .webp image in the element?
    Above on my test page I added a .webp image as a background image in my color section and it is working.
    Try creating a test page and include an admin login so we can check, or link to your .webp image for me to test on my test page, perhaps your file is corrupt.

    Best regards,
    Mike

    October 2, 2022 at 3:32 pm #1367320
    Alwin

    Hello Mike,

    That image indeed, but also this one:
    https://www.option-webdesign.nl/wp-content/uploads/2022/10/Option-webdesign.png.webp

    As you see in the link this image is successfully uploaded as a webp image but the png file is displayed on the website.

    Forget to mention that use the plugin Imagify to convert from jpeg/png to webp. Maybe the problem is caused with this plugin?

    October 2, 2022 at 4:24 pm #1367326
    Mike

    Hi,
    Try disabling the plugin, because the theme won’t change the image used, on my demo site with no plugins the color section uses the image I input, including .webp

    Best regards,
    Mike

    October 2, 2022 at 4:57 pm #1367333
    Alwin

    Hello Mike,

    I don’t want to disable Imagify because when a visitor uses for example Internet Explorer or an older Safari browser which don’t support webp, it will serve a jpeg or png file (that is kept by the plugin as a fallback image after converting all images to webp).

    For example: your page does not show any fallback images when viewed in Internet Explorer or an older safari browser.

    That’s why I prefer to use a plugin like Imagify which provides a fallback option to jpeg.png images.

    But I solved the problem with the background image by uploading a custom webp image for the background (so not converted with Imagify). I also used a blue background color so that in those (few) browsers which don’t support webp there is a blue block. I have read that around 5% of all visitors use browsers that don’t support webp, so for me this is a good workaround.

    • This reply was modified 2 years, 2 months ago by Mike. Reason: removed link to test page
    October 2, 2022 at 5:02 pm #1367336
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Background images in Color Section’ is closed to new replies.