Tiled background not working with Metro Plus

[sarabellum]

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

[BrightTribe]

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.
[email protected] | 678-267-3267

[Mealtog]

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

[Ziggur]

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

[Author]

Posts