Image setting for Mobile/Responsive

[Michael Loguidice]

Hi there,

Actually I have 2 related things here.. 1)I’m just wondering if I can make my header background image responsive for mobile, so that it shows the full image?

It’s not a particularly big problem for me since the image I use is fairly suitable even if it’s cut off, HOWEVER in the mobile view my site tagline is overlapping the image and makes it hard to see.

2) Can you think of anything to do for mobile viewing where my tagline won’t overlap the image?

This is just a test image for now… here’s the link: http://www.yporganics.com

Thank you!
Michael

[Michael Loguidice]

Also, I have reduced the top header padding to zero to create more space at the top for the tagline.

[Tom Lead Developer]

Background images are all about aspect ratio when it comes to being responsive.

One thing you could do is set a different image specific to mobile:

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

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Hi Tom, that looks great.

Could you tell me the css for full screen and tablet too?

Thanks so much!
Michael

[Tom Lead Developer]

Full screen:

@media (min-width: 1025px) {

}

Tablet:

@media (max-width: 1024px) {

}

Hope this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Thanks Tom!

How should I control the height for the image?

I was using the padding settings, but not sure if that would work with this new CSS?

Michael

[Tom Lead Developer]

The height of a background image is dictated by the content inside the area. So you can control it with padding and the height of your content 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Hi Tom, thanks for all your help thus far. I created custom image sizes for mobile, tablet and full screen but I can’t get them to cooperate!

I’ve been using the css for mobile, full screen and tablet that you gave me, but the header padding seems to be the key issue somehow.

I’ve used a smaller image for the mobile 768×517, so that it’s in line with the CSS you gave me:

@media (max-width: 768px) {
    .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768x517.png);
    }
}

also, I’m using the full screen image 1280×861 size, and the CSS is:

@media (min-width: 1025px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280x720.png);
    }

}

When I used the two together the mobile seems fine, however the padding settings determine how much I can see on the Full screen. I have it set to about 130 on the bottom padding and that’s good for rendering the full image on mobile, BUT, I can’t see much of the full screen image at all. If I adjust the bottom padding to about 360-400, I can see the full image on the full screen but then the mobile image is cropped.

But then once I add the code for the TABLET, it seems to affect the mobile settings and the image jumps up to overlap with the site tagline. Here’s the tablet CSS

@media (max-width: 1024px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024x768.png);
    }

}

Here’s everything I used together in the simple CSS:

@media (max-width: 768px) {
    .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768x517.png);
    }
}

@media (min-width: 1025px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280x861.png);
    }

}
@media (max-width: 1024px) {
  .site-header {
        background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024x768.png);
    }

}

I’m also wondering if there’s a custom way to set the padding for each view, like the code you gave me for mobile, full screen and tablet.

Can you please take a look?
Thank you so much!
Michael

[Tom Lead Developer]

Hi Michael,

You can set padding as well quite easily:

.inside-header {
    padding-top: 20px;
    padding-bottom: 20px;
}

So you can adjust that at different sizes.

For the other issue, try adding the max-width: 768px to the very bottom, so the CSS shows up in order (Desktop, Tablet, Mobile).

There shouldn’t be any conflicting of images.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Hi Tom,

This is helpful, getting closer now… I can feel it! Full screen and mobile are good.

However, I’m getting no image for tablet when in the vertical position (on an actual tablet IPAD Mini). In the horizontal position the image is there, but I’m not getting much of the image – even with the bottom padding set to 350 or more. This also reduces the quality of the image I can tell.

Maybe I need a specific image size with specific CSS for this view, what do you think?

I have images sizes of 1280×860 fullscreen, 1024×689 tablet and 768×517 mobile.

Here’s the code I was using:

@media (min-width: 1025px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-center-1280×861.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 350px;
}

}

@media (max-width: 1024px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-1024×768.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 350px;
}

}

@media (max-width: 768px) {
.site-header {
background-image: url(http://www.yporganics.com/wp-content/uploads/2016/11/homepage-image-bottom-768×517.png);
}
.inside-header {
padding-top: 0px;
padding-bottom: 120px;
}
}

If there’s anything you can help with I’d really appreciate it!
Thanks,
Michael

[Tom Lead Developer]

It’s there, the issue is the top of your image is white, and your header isn’t tall enough to start showing the vegetables under the white.

If you chop off some of that top white area, it should work better.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Hi Tom, I tried cropping the extra white space and I created new images where there’s no white space on top – nothing’s working??

I see a difference on the horizontal view of the tablet, but nothing responds at all for the vertical view. Even making adjustments with the padding, the vertical view doesn’t move the text in the body and no image at all in the header background.

Is it possible the CSS I’m using isn’t covering the vertical view for tablet (786×1024)??

Also, I notice that the image for the horizontal view on tablet size, isn’t centered – it’s only capturing the left side of the image – why would that be? Is there a responsive setting for tablets?

Thanks,
Michael

[Tom Lead Developer]

You can see what’s happening here: http://screencast.com/t/TfXp9fgcz5Oi

When you get down to that vertical tablet/mobile size, there’s still lots of space on top of the image.

It’s not resizing because you have the “Attachment” set to “Fixed”.

You can center it by typing this into the “Position” field: center center

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Loguidice]

Hi Tom,

Thanks for spelling it out for me! It turns out I was working on the wrong image, I didn’t realize that the image for vertical tablet and mobile are the same. I had been working on the image for the horizontal tablet…oops!

I can’t seem to figure out how to get rid of the white space for the vertical tablet – it looks fine for the mobile view, but if i completely cut off the top of the image it overlaps the site title and tagline. That’s why I left white space to begin with.

I’m thinking there is an ideal image size for header backgrounds that would cover the two nicely. I’m using a 360×640 but that doesn’t work for the vertical tablet, unless I really crank the bottom padding. Do you have any ideas for the right image sizes?

Again, thanks for everything!
Michael

[Tom Lead Developer]

I think in a case like this, you might be better off merging the site title and tagline with the background using a program like Photoshop or Gimp, then uploading the image as a header in “Customize > Site Identity”.

This would make it so it would be uniform at all screen sizes.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts