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

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #87104
    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 =)

    #87154
    Tom
    Lead Developer
    Lead Developer

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

    Let me know 🙂

    #87158
    Rawhi Mohammad

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

    #87224
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #87491
    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 =)

    #87602
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #87683
    Rawhi Mohammad

    Awesome!

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.