Tiling Background Image – Metro Pro

[thinkmedia]

Hi,

For the life of me I can not get a transparent 60 x 60 image to tile in the background of the site.
I can apply a grey background color just fine.
I can apply a large image as the background just fine.

But when I try to apply a small image to have tile over top of the grey it stretches the 60 x 60 transparent image all over the background.

I have read all the forum posts and have yet to find an answer.

Any help you can provide would be greatly appreciated.

Thanks

Mitch

http://ironicmom.com/

[SMB-dev]

Mitch.

Try this.

1. Clear the Cache in your Browser.
2. Make sure you image is saved as .jpg (I have not tried this with PNG - but it works with .jpg)

From your Admin Console:
3. Select Appearance
4. Select Background
5. Browse to your Computer - where the Image is located and upload
6. You should NOW see a Preview of how that image will look as your background.
with options for position and tiling.

---

“Life is Social” & “Social is the Lifeblood” of a Small Business Owner.

[thinkmedia]

Thanks @MediaGuru

The image is a PNG as that is the only way to have it transparent.
The Preview actually shows it exactly the way it is supposed to be.
The problem is in the browser (live).
I have tried it using Chrome, FF, IE, and Opera and none of them display it properly.
They all blow the 60x60 up full size and don't tile it.

Browsers are all cleared and I have purged the cache at WPEngine.com as well.
No luck.

[SMB-dev]

Ok... one more try...now that I know your on WPE.

I have had a number of issues with their Caching ....

Make sure you have "Object/Transient Cache" DISABLED - then purge the Cache again.

Clear Your Browser Cache, exit and restart browser and see what you get.

I would put even money that it's a WPE Cache issue.....

When ever I work DEV or making adjustments to the site and I am not on STAGING...I DISABLE the CACHE and wait a few minutes before I start anything....this has caused me some headaches in the past until Tech Support helped work this scenario out.

Would be very interested in hearing if this corrects the issue ?

---

“Life is Social” & “Social is the Lifeblood” of a Small Business Owner.

[thinkmedia]

Sorry to be a dork but where do I disable “Object/Transient Cache”
I know I have seen it before but for the life of me, I can't figure out where.

Thanks!!

[thinkmedia]

I set up http://ironicmom.staging.wpengine.com/ which has no caching on it.
It still is making the 60x60 png full screen instead of tiling it.

[timskye]

Hi, its not a caching issue.
The background in Metro Pro uses 'Backstretch' to create a responsive fill the screen background.

See the setup instructions
http://my.studiopress.com/setup/metro-theme/
Point 5
"The Display Options settings for Position, Repeat, and Attachment are not important for this theme. These settings will be ignored."

If you don't want this, you'll have to disengage the backstretch stuff, and make sure that 'normal' background setting is working.

---

I craft websites using WordPress, Genesis and Woocommerce.
Designing, building & managing websites since 1995 | Follow | G+

[thinkmedia]

Hey @timskye

Thanks!
I've used Metro before and had full screen images so it never showed up on my radar as a problem.

Hmmm - before I release what is left of my hair ... do you know of any info on how to 'disengage' the backstretch feature.
If not, that's ok.

Cheers,

Mitch

[timskye]

Yes, in functions.php you will see a bunch of enqueue statements starting with

//* Enqueue Backstretch script and prepare images for loading
add_action( 'wp_enqueue_scripts', 'metro_enqueue_scripts' );
function metro_enqueue_scripts() {

just comment out the add_action() statement.
Without taking a further look at it, I'm not sure whether you would need to do anything else to get the default background settings working. Try it?!

---

I craft websites using WordPress, Genesis and Woocommerce.
Designing, building & managing websites since 1995 | Follow | G+

[thinkmedia]

Hey @timskye

Thanks for that.
I pulled the code right out of the functions.php file.
No good.
It took out the stretched image but there must be something else affecting the background.
I'll have to dig deeper to find it.
If I do, I'll post it here.

Cheers,

Mitch

[riggie11]

I got it to work on this site at http://freyer.com if you need to check any code.

Step 1: Upload your background graphic in your WordPress Admin panel at Appearance -> Background

Step 2: Comment out a line of code in your functions.php file like this:
//* add_action( 'wp_enqueue_scripts', 'metro_enqueue_scripts' );

Step 3: Also add this line to functions.php:
/** Add support for custom background */
add_theme_support( 'custom-background' );

Step 4: Add this css below to your styles.css file:
/* Add Background Image
------------------------------------------------------------ */
body {
background-image: url('images/bg.png');
}

The streched background should now have disappeared and your background image should now display properly.

[riggie11]

In addition to the above, copy your background image as bg.png to your /wp-content/themes/metro-pro/images/ folder.

[Author]

Posts