How to Add a Custom Background Image to BuddyPress Avatars

Let’s do something fun with BuddyPress! We had someone on Twitter request a tutorial on how to give BuddyPress avatars a custom background, specifically a Polaroid image, so that’s what we’re going to use as an example today.

The only thing you’ll need to do for this tutorial is edit the CSS of your child theme and upload the background image to your theme’s images folder.

Step 1: Select a background image for your avatars.

We’ll be using the BuddyPress Default Theme for this tutorial, so results may differ, depending on your child theme. Default BuddyPress avatars are squares of varying sizes. In this example we’ll add the changes for the individual profile pages, so that they will look something like this:

When selecting a background image, such as a Polaroid, you’ll want to make sure that the space where the avatar goes is square. You may need to modify the image first. Also, you’ll want to remember that the default member profile avatars are 150px square. Select a background that is slightly larger than that. In this tutorial we’ll use one that’s 176px wide and 206px tall. Download it here if you want to follow along.

Step 2: Upload the background image to your child theme’s images folder.

Chances are that your file structure will look similar to this:

wp-content/themes/child/_inc/images

Step 3: Add the CSS to your child theme.

Add this to your child theme’s style.css file:

1
2
3
4
5
6
7
8
9
10
div#item-header-avatar {
background:#ffffff url('_inc/images/polaroid-bg.png') no-repeat left top;
height: 214px;
margin: 0 25px 15px 0;
float: left;
}

div#item-header-avatar img.avatar {
margin: 11px 10px;
}

This part you may need to modify, depending on the background image you selected. Basically, in the first part you assign a height based on your background image’s height and add some margin around the background area for spacing. Then, in the second part you are adding some margin around the avatar itself to place it correctly within the background image. The margin values may be different for you based on your image and your theme, so don’t be surprised if you need to tweak it a little bit.

That’s all – you’re finished! I hope you enjoyed this simple customization. Get in touch with us on Twitter or in the comments if you there are any other customization tutorials you’d be interested to see on our blog.

Tags ,

Comments (3)

  1. Hello. This is nice!

    But is it possible to give this frame to only one user? I’m going to have a weekly competition and it would be great to give a frame to the winner.

    Hope for answers.

    Thank you!

Participate