- This topic has 6 replies, 2 voices, and was last updated 7 years, 2 months ago by
First.
-
AuthorPosts
-
March 15, 2015 at 2:11 pm #87104
First
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 =)
March 15, 2015 at 4:10 pm #87154Tom
Lead DeveloperLead DeveloperPerhaps 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-developmentMarch 15, 2015 at 4:16 pm #87158First
Lol, cover “cover”s everything, silly me.
But the whole image isn’t being shown.March 15, 2015 at 11:06 pm #87224Tom
Lead DeveloperLead DeveloperHmm 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-developmentMarch 16, 2015 at 11:04 am #87491First
I used the following for the header..
http://isbr.net/wp-content/uploads/2015/03/header.pngand 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 =)
March 16, 2015 at 3:44 pm #87602Tom
Lead DeveloperLead DeveloperYea, 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-developmentMarch 16, 2015 at 9:29 pm #87683First
Awesome!
-
AuthorPosts
- You must be logged in to reply to this topic.