Tiling Background Image – Metro Pro

Community Forums Forums Design Tips and Tricks Tiling Background Image – Metro Pro

This topic is: not resolved

This topic contains 11 replies, has 4 voices, and was last updated by  riggie11 10 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #84258

    thinkmedia
    Participant
    Post count: 8

    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/
    #84264

    mediaguru
    Participant
    Post count: 56

    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.

    #84266

    thinkmedia
    Participant
    Post count: 8

    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 60×60 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.

    #84272

    mediaguru
    Participant
    Post count: 56

    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 ?

    #84276

    thinkmedia
    Participant
    Post count: 8

    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!!

    #84292

    thinkmedia
    Participant
    Post count: 8

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

    #84295

    timskye
    Member
    Post count: 10

    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+

    #84444

    thinkmedia
    Participant
    Post count: 8

    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

    #84446

    timskye
    Member
    Post count: 10

    Yes, in functions.php you will see a bunch of enqueue statements starting with
    [php]
    //* Enqueue Backstretch script and prepare images for loading
    add_action( ‘wp_enqueue_scripts’, ‘metro_enqueue_scripts’ );
    function metro_enqueue_scripts() {
    [/php]

    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+

    #84453

    thinkmedia
    Participant
    Post count: 8

    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

    #87777

    riggie11
    Participant
    Post count: 13

    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.

    #87999

    riggie11
    Participant
    Post count: 13

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

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

You must be logged in to reply to this topic.