Full Responsive Background Image

[glutzkommunikation]

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

[Mohammad – SUPPORT]

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

[glutzkommunikation]

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.

[Mohammad – SUPPORT]

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

[glutzkommunikation]

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

[Mohammad – SUPPORT]

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