Tiled background not working with Metro Plus

Community Forums Forums General Discussion Tiled background not working with Metro Plus

This topic is: resolved

This topic contains 3 replies, has 4 voices, and was last updated by  Ziggur 5 months, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #66739

    sarabellum
    Participant
    Post count: 14

    I’m attempted to add a tiled background to my site. I have tried to tile it completely, tile horizontally and tile vertically – nothing works. The preview is fine, but the live site is stretching my image.

    Any suggestions? I have found several threads addressing the issue, but no solutions.

    http://four-fit.com
    #66743

    BrightTribe
    Participant
    Post count: 28

    Hi there. I just installed the theme on one of my dev accounts, and it looks like the background setting is broken on that theme because it’s doing the exact same thing on mine site.

    It’s easy enough to “Remove Background Image” and go to Appearance / Editor and simply add the background to the CSS at the bottom of the file. Grab the URL of your image and drop it into the code below, and you’re all set.

    body {
    background: url(http://YOURDOMAIN.com/wp-content/uploads/2013/10/IMAGENAME.png) repeat #766856;
    }

    It stinks having to do a work-around, but it’s easy enough to fix. ;)


    Brian Dempsey, Bright Tribe, Inc.
    info@brighttribe.com | 678-267-3267

    #67246

    Mealtog
    Participant
    Post count: 352

    I can confirm that Metro Pro’s background settings are indeed not working properly. Brian’s tip is the fix.

    #71702

    Ziggur
    Member
    Post count: 4

    I can confirm what Mealtog said: Metro Plus theme, background tile functionality not working, Brian Dempsey’s fix works.

    This fix led me to a solution for another problem. I wanted to make the background image responsive, in that it’s never going to seen on a small scree, e.g.: a phone, so why make them download all that extra image weight? So instead of putting it at the end of my CSS I put it in the responsive section, using a min-width statement, as follows:

    @media only screen and (min-width: 800px) {

    body {
    background: url(http://YOURDOMAIN.com/wp-content/uploads/2013/10/IMAGENAME.png) repeat #766856;
    }

    }

    Haven’t tested it across too many devices yet, but 800px seems to reliably give me a tiled image background for an iPad in landscape mode on up, and a flat color in portrait mode on down. Obviously use your own URL for the image, and your own hex code for the fallback color.

    Brian M

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.