How to Add Custom Background Support to WordPress Theme

fullscreen background image

WordPress makes it really easy to add background support to any WordPress theme. With this one line of code, you can add a custom background to your site in few clicks:

1 2 3 4
<?php
//* Add support for custom background
add_theme_support( 'custom-background' );
view raw functions.php hosted with ❤ by GitHub

Once you’ve added the code to your theme (preferebly in functions.php file), you’ll see a new menu to add the custom background from Appearance > Background. Interestingly, you can set default arguments for custom background as default color, default background image, detault repeat (x or y or both), default x position and more. Please see WordPress codex page for more info and example of this. These default arguments could be useful if you’re theme developer and would like to release your theme to public. The arguments helps users to quickly setup their site to look the same as the demo site.

If you’re looking for a great pattern or repeating background, Subtle Patterns offer lots of free backgrounds that you can use on your site. Tool like Subtle Patterns Bookmarklet could be really helpful to help you choose the background that matches your site design.

If you want to add a full background image, you may want to integrate Backstretch.js is a cool script you may want to use. It autoscales image regardless of the browser so the image will always fill the screen and looks great all the time. Luckily, there’s a plugin called Simple Full Screen Background Image that will do all the works to integrate the script to your WordPress site. Simply install this plugin and you’re good to go.

Leave a Reply

Your email address will not be published. Required fields are marked *