Background Image Twenty Eleven – Full Image and Tiled

Background Image Twenty Eleven vs Twenty Ten theme

With Twenty ten theme or other themes even (I used Inova theme in this Twenty Ten background tutorial), it was great to be able to modify and add background image on Twenty Ten theme.

This time, with Twenty Eleven the default theme of WP 3.2.1, we also can customize the same thing, which is adding background image.

As an important note, as for this background image, I recommend that you don’t use copyrighted images.

With this tutorial, I googled “free background image” and download an image with the size: 32x32px and can be used for non-commercial purpose.

Another image for full background, this time I use my own image which I took with my daughter when we walked around the hills behind my house with size 1680x1260px

As for your preffered images, you can use any images you own or like.

Not different than my old tutorial with TwentyTen theme, in fact, this background image Twenty Eleven tutorial will use the same method, however, I still will make video so it will be more clear for newbies.

I will use a video but using two images, you can choose one of the images, and decided which one you like.

Screenshot of the full image background:

background image twenty eleven
Full background image

Screenshot of the tiled background:

background image twenty eleven
Tiled background

Background Image Twenty Eleven Video

Background Image Twenty Eleven Steps;

1. Prepare the image accordingly (I mean decide full or repeated images). I saved mine on desktop.

2. Login to your dashboard, and navigate to “Appearance” on the top of Admin bar or in the left sidebar of the dashboard, and then choose “Background” option.

3. a. For the small tiled background, after upload the image, tick these options:

Position: left

Repeat: Tile

Attachment: fixed.

3.b. For the full browser image background, after upload your image tick these options

Position: Center

Repeat: No Repeat

Attachment: fixed.

4. Save changes, and refresh your site. Your background image of Twenty Eleven should appear, if not try to clear browser’s cache.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page

Comments

  1. Jochen says

    Hallo Kimi,
    here I am again. ;)
    Is there any way, to switch between several bgr-images in TwentyEleven? I don’t mean automatically. To change a file, (for me) there is only the option to choose it on the local HD and than “Upload”. Is it a bug on my installed theme?

    Best wishes
    Jochen

    • says

      Hi Jochen,

      Do you mean that the background should be changed automatically when the page is refreshed? I am sure it is possible, but have to look more deep in the file.

      I don’t really have time these months. I will definitely will look into it when I have more spare time.

      Thank you for visiting

      Best wishes,

      Kimi

      • Jochen says

        Hi Kimi.
        I do not mean _automatically! I’m missing the possibility, to change the background image via the “Media” (uploaded files on the server). Normally, I can choose a picture from Computer | URL | Gallery | Media. In the Admin/Background menu, I only have “From Computer”. Hope I was understandable.
        Please pardon my bumpy english. I’m german and do not write or speak english very often. And of course some of my terms are self-translated from my german WordPress.

        Regards
        Jochen

  2. says

    This is nice one. I loved the twenty ten theme too and now twenty eleven is awesome with full image view and tiled also. nice.