Adding a Full Screen Background Image to WordPress

Are you searching for an easy way to add a background image to WordPress which covers the full screen?

You’ll need a solution which covers all browser types and automatically adjusts to different screen sizes.

There are different ways to add a background image to WordPress so its displays in a full screen

One way is to use code and the other is to install a plugin.

Code to Add a Background Image

There’s different types of code like css, php & javascript to add a background image to WordPress.

Here’s a range of different code types you can use to add & display your background image.

Background Image Code for Thesis Users

body.custom {
background: #464646 url('images/yourbackgroundimage.png') 50% 0 no-repeat;
}

.custom #container {
margin-top: 2em;
margin-bottom: 2em;
}

.custom #page {
background: #fff;
}

Thesis users will need to upload your background image to your images folder on your web server and then copy and paste this code into your custom.css editor.

Twenty Eleven Background Image

The default theme for WordPress already includes a built in feature for adding a background image to your blog so you don’t need to add custom css code.

Adding a Background Image to Other WordPress Themes

Simply paste this code into your custom style.css file or child themes css file and upload your background image to your images folder on your web server.

You can also edit the hex color code to blend in with the color of your background image

body {
background: #464646;
background-image: url(images/yourbackground.gif);
background-repeat: no-repeat;
background-position: top center;
}

Background Image Plugins

Here’s 3 plugins which enable you to customize your websites background using different functions.

1. This plugin enables you to display a different background image on pages, posts, and archive pages.

2. Want rotating background images? This plugin enables you to upload multiple images and set the time between rotation so you can use the images a as a background slideshow.

3. Pippins plugins provides a free WordPress plugin which requires minimal setup.

All you need to do is install the plugin and upload the image you want to use for your background.

Search the plugin repository for the plugin called Simple Full Screen Background Image

You’ll find a link to Full Screen BG Image under the Appearance tab in your WordPress admin panel. Upload your image and click save.

The image i used for this example is about 2000 pix x 2000 pix but you could you one which is 1024 pixwide.

Thanks to the WordPress Foundation for the use of their logo.

Default WordPress Background Settings

The latest version of WordPress includes a built in function for easily adding a background image or hex color to your WordPress site.

Go to Appearance > Background and select an image or color.

Different Background Images

You could add multiple images to create different backgrounds for posts, pages, categories, tags, search, 404 etc. using code or you could simply install a premium plugin for background  images.

Watch video on how to add different background images to WordPress using a plugin

Full Screen Background Images Pro Plugin Demo

I know there’s lots more code out there which you can use to add a custom background image(s) to your blog or website.

Related Templates

• Responsive Full Screen Background Image Template For Genesis