Responsive background image

  • Resolved Pascalvd

    (@pascalvd)


    11 years, 2 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:
    http://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)
  • Rovato93

    (@rovato93)

    11 years, 2 months ago

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

    Hardeep Asrani

    (@hardeepasrani)

    11 years, 2 months ago

    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)

    11 years, 2 months ago

    Hi,

    Actually, I am using the Zerif Lite theme :). My website is http://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)

    11 years, 2 months ago

    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)

    11 years, 2 months ago

    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?

    Hardeep Asrani

    (@hardeepasrani)

    11 years, 2 months ago

    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)

    11 years, 2 months ago

    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!

    Hardeep Asrani

    (@hardeepasrani)

    11 years, 2 months ago

    Hi,

    I will recommend you to use get_stylesheet_directory method. 🙂

    Regards,
    Hardeep

    Thread Starter Pascalvd

    (@pascalvd)

    11 years, 2 months ago

    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.