[Resolved] Background image, sections on mobile

[Tom]

Perfect, glad you got it sorted 🙂

[Sarah]

I can’t get this to work with parallax!

https://sarahcairncross.com/welcome/

Well, I’ve got it to work for desktop and mobile view but not tablet, for some reason in Customiser it is showing only to the bottom of my nose haha.

Also, on portrait in mobile view it is repeating the image as I scroll down the page. I have set the padding to 350px top and bottom in the section.

I did try creating this using the Page Header with parallax but I got the the repeat on all views. Is the problem the dimensions of my image? Is there an optimum image size for a background image?

Any pointers would be FAB! Thank you in advance Tom 🙂

[urs]

Hi
Im using GP premium current Version and WP 4.7.2.
My Header image is not resizing to Mobile view under http://www.philippinen-blog.ch
Any idea what i can do?
Thanks

[Leo]

Hi there,

Unfortunately that’s just the nature of background images – it has to do with the aspect ratio.

The ratio on a desktop is different than on mobile, but the image still has to fill the area, so certain part of it aren’t shown.

One solution is to create an image just for mobile, then apply it using some CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url( 'URL TO YOUR MOBILE BACKGROUND IMAGE' );
    }
}

Let me know if this helps.

[Tom]

Sarah – I’m not seeing just the bottom of your nose, but I am seeing the repeated image. This is happening because the area is so tall and your image isn’t tall enough to scroll down that much.

You can try setting the top/bottom padding to a percentage instead of pixels. You might also need to reduce the height a bit, or increase the height of your image.

urs – it’s best not to include a logo or text in a background image. You’ll want to separate the logo from the background, and upload it in Customize > Site Identity.

If either of you need more help it might be better to start a new topic so the original author of this one doesn’t get a bunch of emails 🙂

[urs]

thanks Tom
for me the case is closed. Quick and dirty – just added the header image to “site idendity – Logo”.
This makes the trick and the image is resposive as a charme now.
regards

[Tom]

Great 🙂

[Sarah]

Thanks Tom, changing padding didn’t help, so I checked the image dimensions I used on a client site that worked great and applied the same aspect ratio to mine of 4:3 – it all seems to be working fine now on desktop and mobile phone but in Customiser it still displays only to my nose on tablet size, despite doing the custom class and css:

@media (max-width: 768px) {
.custom-mobile-bg {
background-image: url(‘https://sarahcairncross.com/wp-content/uploads/2017/02/sarah-cairncross-header-mobile.jpg’) !important;
height: 200px;
margin-left: auto;
margin-right: auto;
}
}

[Leo]

Hi Sarah,

Would you mind opening a new topic for your question so the original author of this post doesn’t get a bunch of e-mails?

Thank you!

[Tom]

The media query specific to tablets is: @media (min-width: 769px) and (max-width: 1024px)

[Sarah]

Hi Leo, I kept it in here as it’s all part of the same topic – I used code suggested early on in the thread. If people don’t like getting updates, they can simply log into the post and untick the box at the bottom labelled Notify me of follow-up replies via email 😉

Thanks Tom! will go and change things 🙂

[Tom]

Let me know how it goes 🙂

[Sarah]

Just made the changes and it works perfectly now! Thank you Tom! 😀

[Tom]

You’re welcome 🙂

[rex wickham]

Hi Tom
I’ve used the suggested code, but it’s not working for me. In firefox developer console I can see the original large image is used and not the custom class – see screenshot:

https://imagebin.ca/v/3veDG7Ht3uc9

This is what I added to the Section:
custom-mobile-bg

and this is what is added in tthe WordPress customiser. I include a bit of other code which I wonder if problematic:

@media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

@media (max-width: 768px) {
      .custom-mobile-bg {
            background-image: url('http://www.rnli-911challenge.co.uk/wp-content/uploads/2018/03/home-page-mobile.jpg');
      }
}

Not sure where I am going wrong, can you help?

Thankyou

[Author]

Posts