WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What is the easiest way to add a background image to a single page like tryghost.org?

I am currently running under WordPress and was wondering what code I need to add and where. The image is only to be placed on the homepage, and when scrolling down the image should be scrolled down as well. It should also be full width (without destroying image ratio) no matter what the device.

Thanks for the input!

EDIT: Please give a walkthrough on exactly what to do for those new to WordPress.

I appreciate everyone's help! Still Unanswered, will give best answer to Answerer.

share|improve this question

Use Conditional Tags: http://codex.wordpress.org/Conditional_Tags Or a custom template for homepage: http://codex.wordpress.org/Stepping_Into_Templates

Then it's a matter of applying a style / class when, for example, is_front_page() (or sometimes) is_home() (for conditionals), or on your custom template. It's mostly a matter of CSS then.


Use Chrome to learn body class. Apply style accordingly:

body.home {
    background:url(images/home_background.png) no-repeat;
share|improve this answer
More generically, you can use is_page() if it's not meant for the Front/Home Page. For example, if you want it only on the page named "My Special Page", you could use if ( is_page( 'My Special Page' ) ) { // code goes here }. – Pat J Jun 20 '13 at 21:29
+1. I like to use is_page($x) where $x is a specific ID I've already looked up. That way if the slug or page title changes, it will still reference the ID, which is more permanent. Example: if(is_page(9)) // home page ID { do stuff } – GhostToast Jun 20 '13 at 21:31
Alright, thanks for the input guys. As I am new in WordPress I need some guidance as to what code to put (to set the background image) and where (style.css?). – afang Jun 20 '13 at 21:36
Come on man, do a little research. background:url(image/background.jpg) – GhostToast Jun 20 '13 at 21:40
I like using backstretch.js for fully screen backgrounds. You can wrap the enqueue for the plugin and the initialize timon function in a conditional statement to have it only show up on the page you want. – JPollock Jun 20 '13 at 21:45

I wrote a plugin that let's you do it site wide (if you don't want to jump into code): http://wordpress.org/plugins/simple-full-screen-background-image/

If you want per-page backgrounds, then a Pro version is available.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.