New Landing How can we help? Themeforest Theme Support Flexform Full Responsive Background Image

Viewing 6 posts - 1 through 6 (of 6 total)
  • Posted in: Flexform
  • #292795
    glutzkommunikation
    Member
    Post count: 46

    Hi there!

    I am curious if anybody can help me with the following problem:
    I’ve create a website with Full Width-Page Layout (www.project47.ch/wordpress)
    Under the Theme Options > Background Options I’ve selected a Background-Image and set the Size to “Cover”.
    The Site looks perfect on computer screen, but if I take a look on iPad or iPhone, the Background-Image isn’t responsive.

    I’ve tested some Custom CSS like…

    @media only screen and (max-width: 479px) {
    background-size:100% cover !important;
    }

    or

    @media only screen and (max-width: 479px) {
    background-size:100% auto !important;
    }

    … but the situation is still the same. The Background-Image stays much to big on talbet and smartphone.

    I am looking forward to an answer.

    Kindest regards to the support-team and have a nice day!
    Achim

    #292912
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    It seems perfect to me. Just attach the screenshot to get the exact issue with background image.
    Thanks
    Mohammad

    #292948
    glutzkommunikation
    Member
    Post count: 46

    Hi Mohammad

    Thank you, for your answer.
    Attached, I send you 3 png-files (Screen iPad-landscape, Screen iPad-portrait, Screen Mac).
    At the moment, I use the following CSS-Code:

    @media only screen and (max-width: 479px) {
    background-size:100% auto !important;
    }

    Can you give me the correct Code for smartphone and tablet?

    Kind Regards
    Achim

    Attachments:
    You must be logged in to view attached files.
    #292962
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    You code is incorrect so please remove it first and use my code:-

    @media only screen and (max-width: 479px) {
    body{background-size:100% auto !important;}
    }

    Thanks
    Mohammad

    #292969
    glutzkommunikation
    Member
    Post count: 46

    Hey Mohamad

    Thank you very much for your code.
    I’ve put it in and now it works on smartphone.

    So I’ve create the following Codes:

    @media only screen and (max-width:1024px) {
    body{background-size:100% auto !important;}
    }

    @media only screen and (max-width: 979px) {
    body{background-size:100% auto !important;}
    }

    @media only screen and (max-width: 768px) {
    body{background-size:100% auto !important;}
    }

    @media only screen and (max-width: 479px) {
    body{background-size:100% auto !important;}
    }

    Perhaps a little complicated but now it works perfect on smartphone and tablets – landscape and portrait-format.

    Thank you for you’re quick help and greetings from Switzerland to you and your collegues.
    Achim

    #292992
    Mohammad – SUPPORT
    Moderator
    Post count: 27441

    Hi,
    Great thanks for these kind words.
    Thanks 🙂
    Mohammad

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register