Header/Body images not taking up all space on mobile site.

[Rawhi Mohammad]

The header and body images look good on the desktop site, but not the mobile site. The images don’t cover up all the space.

I’m currently using these settings..

100% Width – No Repeat – Fixed

Thank you =)

[Tom]

Perhaps try “Cover” instead of “100% width”?

Let me know 🙂

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

[Rawhi Mohammad]

Lol, cover “cover”s everything, silly me.
But the whole image isn’t being shown.

[Tom]

Hmm background images can be hard to control like that – if you need the entire image to show you need to make sure the aspect ratio is perfect so as it’s sized down it’s always fully showing. It comes down to the size and aspect ratio of the image itself.

Let me know if that makes sense or not 🙂

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

[Rawhi Mohammad]

I used the following for the header..
http://isbr.net/wp-content/uploads/2015/03/header.png

and the following for the body backgroundhttp://isbr.net/wp-content/uploads/2015/03/Islamic-Wallpapers.jpg

on the desktop, the body is ok, header now covers but doesnt show all image as it was in previous settings.

on mobile, both header and body doesnt show all images, everythings covered but does not show image properly.

Its currently in maintenance mode, but use creds wp/wp to see site and see what I mean.

Thanks again =)

[Tom]

Yea, the background CSS attribute doesn’t have a huge amount of flexibility.

You can see all the available options for the background-size attribute here: http://www.w3schools.com/cssref/css3_pr_background-size.asp

You can use media queries in your CSS to give different values to this attribute on desktop/mobile like this:

@media screen and (max-width: 768px) {
      .element-name {
            background-size: contain;
      }
}

I don’t think there’s a whole lot of options other than that, but you may find something on Google with enough looking 🙂

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

[Rawhi Mohammad]

Awesome!

[Author]

Posts