How To Use An Image For Your WordPress Theme Background

Written by Costa on November 9, 2009 - 9 Comments
Categories: Theme Modification Tips

background-image

Festive season is around the corner and I thought it would be a good idea to usher in the mood a little bit early this year. For those who are into Internet marketing, this is the season for selling. The buying mood has started and I am already seeing an increase in sales with my affiliate products since last month. To make things a little merrier amidst all the gloom in the economy, I have added a Christmas image to the background of my Theme here.

To ad an image to your WordPress Theme is as easy as it can be. Just go look for an image around the size of approximately 1600 x 1050 px. You will find lots of it in sites offering free desktop wallpapers. That’s my preference as it will fit most computer screens. Can be smaller or even bigger, it’s up to you. The idea is to have the images on either side of your contents and not hidden behind. It might take some adjustments to get it right. Those with ‘slimmer’ content areas will have an easier time.

When you are satisfied with your image, upload it to your Theme’s image folder. Go to your Theme editor and open up your stylesheet. In most Theme, the first line of codes will be the one that declares all core layout. Look for ‘body’ or something similar. Inside the curly brackets you will see ‘background: #xxxxxxx’ (x=color codes) immediately after the color codes add in your image url like this: background:#xxxxxxxx url (images/yourimagefile) no-repeat;

As an example, mine looks like this:
body { background: #66070D url(images/xmas.jpg) no-repeat; color:#555354; font: 60% 'Lucida Grande', Verdana, Arial, Sans-Serif; text-align: center; }

One thing to take note, make your background color as close as possible to that of your image so it can blend in. Use a color picker to determine the color of the image’s very edge so you get a almost similar color. Have fun!

  • Advertisements

8add910cb264a76891935198f1b45cd5

Article by Costa Fong

@costafong

Who loves to mod and mess up WordPress Themes.

Costa has written 557 articles here. Some are awesome, some are lame.

If you enjoyed this post, whether it's awesome or lame, consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

SUBSCRIBE NOW to receive free Photoshop Action scripts for creating beautiful eCovers.


FREE Photoshop Action Scripts For Subscribers Only. Download link is at the bottom of the article when you receive your feeds.
ENTER YOUR EMAIL

REMEMBER TO CONFIRM YOUR SUBSCRIPTION

Other Awesome Articles

  1. Changing Background Color For Your WordPress Theme
  2. How To Create A Beautiful Background For Your WordPress Post
  3. How To Add Colors To Your Theme Sidebar
  4. How To Make Rounded Corners For Your WordPress Theme
  5. How To Identify The Color Codes In Your WordPress Theme
  6. CSS Codes To Highlight WordPress Post Background Color.
  7. Making A Header Image For The StudioPress Theme
  8. Align Image In Post WordPress 2.7

Users who found this page were searching for:

  1. wordpress theme body bg image
  2. wordpress theme background image
  3. adding background images in wordpress
  4. wordpress background proportions
  5. how to use the /images folder in headway theme
  6. add background image wordpress
  7. How to place in the images folder in your theme directory wordpress
  8. how to add my picture to wordpress background
  9. insert image background template wordpress
  10. add background image wordpress theme

9 Responses to “How To Use An Image For Your WordPress Theme Background”

Comments

Read below or add a comment...

  1. eni
    December 28, 2009 at 10:57 am

    thanks for your post.
    i wanted to know is this only for upgraded wordpress users ?
    i ask because i haven`t seen any themes image folder in my page.
    thanks in advance.

    Reply
  2. eni
    December 28, 2009 at 10:48 pm

    i am logged in but still can not see it:(
    at APPEARANCE i have : themes,extras,widgets,edit css,custom header and typekit fonts.when i press themes i can only see the theme`s gallery.

    Reply
    • Costa
      December 29, 2009 at 9:00 am

      Hi Eni,

      You are logged in to your dashboard. NOT your server. You must log in to your server in order to see all the files and folders in your theme.

      Are you hosting your own blog or are you using the free WordPress platform? If you are using the free platform, I don’t think they allow you to mod the Themes.

      If you are hosting you own site, then you log in to your cpanel with your FTP client, go to public_html where you will see your WordPress Installation. Go to wp_contents. Open the Themes folder. Look for the folder of your Theme. Open the folder and you should see an image folder inside. That’s the folder you upload your image.

      Reply
  3. eni
    December 29, 2009 at 10:18 am

    yes i`m using free wordpress themes.i guess that is the reason.
    thank you for your help;)

    Reply

Trackbacks

  1. Costa says:
    November 9, 2009 at 3:38 am

    Latest update from Blogigs.com – How To Use An Image For Your WordPress Theme Background Read all of it here http://bit.ly/48vOvQ

    Reply
  2. Richard Kersey says:
    November 11, 2009 at 1:46 pm

    How To Use An Image For Your WordPress Theme Background http://bte.tc/wJs #RTW

    Reply
  3. Alexander Maxham says:
    November 14, 2009 at 10:00 pm

    How To Use An Image For Your WordPress Theme Background http://bte.tc/wJs #RTW

    Reply
  4. MUhammad Usman Akram says:
    November 21, 2009 at 6:36 pm

    How To Use An Image For Your WordPress Theme Background http://bte.tc/wJs #RTW

    Reply


Share Your Thoughts...