Responsive background image

  • Resolved Pascalvd

    (@pascalvd)


    9 years, 8 months ago

    Hi,

    I’m really trying to offer an optimal experience for all devices and resolutions. However, I’m running into some trouble with the background image which is shown in the big title section. When I resize my browser or browse on a mobile phone it only shows a very small portion of the background, while I would like to show the entire image. I would like the big title to look and act like the one on this page:
    https://agaperiding.org/

    Could you please tell me how I can achieve this in the big title section? Thank you very much. I am very happy with the support you guys offer.

Viewing 9 replies - 1 through 9 (of 9 total)

  • Might be a stupid question but are your picture’s vector files?

    Hi,

    I tried to look into your website but you’re not using the Zerif Lite theme anymore, so unfortunately, we can’t do anything. ??

    Regards,
    Hardeep

    Thread Starter Pascalvd

    (@pascalvd)

    Hi,

    Actually, I am using the Zerif Lite theme :). My website is https://www.fit-tips.nl although it currently is in maintenance. The slider in the link in my post is an example of what I want the big title section to look like. The slider on that website is fully visible and adjusts the width and height so the entire image remains visible no matter the browser size.

    Basically I would like it to use a responsive image instead of the default background image. I would like it to show the entire image no matter what the browser size is. Right now the lower part of the image is not visible on a higher resolution, although it becomes visible once the browser is resized to a smaller size. I hope my explanation is clear :).

    EDIT—————————————————–

    Another way to put it, is that I would like to use a full width responsive slider instead of the big title.

    Thank you!

    Thread Starter Pascalvd

    (@pascalvd)

    I have noticed that you’ve recommended to use Master Slider. I would like to use a full width slider with Master Slider instead of the big title, just like they have done in this example:
    Master Slider Full Width

    I can’t seem to insert the Master Slider code. Should I put it in the big_title.php or in the front-page.php? And where should the code go?

    Thread Starter Pascalvd

    (@pascalvd)

    Master slider wasn’t working with the Zerif Lite theme. Instead I am now using Easing Slider. The only problem is that I am using a child theme. When I create a big_title.php file for the child theme and paste the code it does not work. It only works when I paste the code in the parent theme’s big_title.php file. How can I fix this?

    Hi,

    I know why big_title.php doesn’t work. You also need to copy front-page.php to your child theme and replace the following code:

    include get_template_directory() . "/sections/big_title.php";

    with:

    include get_stylesheet_directory() . "/sections/big_title.php";

    ??

    Regards,
    Hardeep

    Thread Starter Pascalvd

    (@pascalvd)

    Hi Hardeep,

    I already figured it myself although, I used “../../sections/big_title.php” instead of the get_stylesheet change. Does this make any difference? Thanks!

    Hi,

    I will recommend you to use get_stylesheet_directory method. ??

    Regards,
    Hardeep

    Thread Starter Pascalvd

    (@pascalvd)

    Okay thank you very much Hardeep. Once again,great theme and great support:)

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive background image’ is closed to new replies.