Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

add background image to specific page

Posted on 2011-09-23
Last Modified: 2012-05-12
I need to add a full background image to a specific page on my wordpress site.  Below is the css code for inner which controls that.  what would I add to my css file for a specific page though?
#inner {
	background: #FFFFFF;
	width: 920px;
	margin: 20px auto 20px;
	padding: 20px;
	overflow: hidden;
	border: 0px solid #665029;
	border-radius: 6px;
	-moz-border-radius: 6px;	
	-webkit-border-radius: 6px;	
	-webkit-background-clip: padding-box;
	-webkit-background-origin: padding-box;
	-moz-box-shadow: 3px 3px 4px #665029;
	-webkit-box-shadow: 3px 3px 4px #665029;
	box-shadow: 3px 3px 4px #665029;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#665029')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#665029');

Open in new window

Question by:COwebmaster
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 100 total points
ID: 36588716
Simplest (but perhaps not the most elegant) way to do it would be:

1) Create a custom page template
2) Add a new CSS declaration for the different background and use it in the new page template.
3) Edit the page in WordPress, change the template.
LVL 23

Assisted Solution

jeremyjared74 earned 200 total points
ID: 36589095
If you have your template files set-up correctly, WordPress will give each page/post it's own id. You can use this for styling individual posts. For this to work, you will need the following code:

<body <?php body_class(); ?>>

Open in new window

This would be in the header.php file, and should replace the <body> tag if that's what is currently being used. You could then use view source to get the id of the page and use it to add a bg image.

Author Comment

ID: 36590612
what are the steps to setting up a template page, then adding in that code?
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

LVL 23

Accepted Solution

jeremyjared74 earned 200 total points
ID: 36590866
You can set up the other template, but it's really not necessary unless you have other layout changes to make. The whole purpose of the body class that has been added by the WordPress Core developers was to allow users or theme designers the ability to do things such as customizing the layout per page.

If you're set on using the custom template, here's  the instruction from the codex page:
Creating Your Own Page Templates

The files defining each Page Template are found in your Themes directory. To create a new Custom Page Template for a Page you must create a file. Let's call our first Page Template for our Page snarfer.php. At the top of the snarfer.php file, put the following:

Template Name: Snarfer

The above code defines this snarfer.php file as the "Snarfer" Template. Naturally, "Snarfer" may be replaced with most any text to change the name of the Page Template. This Template Name will appear in the Theme Editor as the link to edit this file.

The file may be named almost anything with a .php extension (see reserved Theme filenames for filenames you should not use; these are special file names WordPress reserves for specific purposes).

What follows the above five lines of code is up to you. The rest of the code you write will control how Pages that use the Snarfer Page Template will display.

See Template Tags for a description of the various WordPress Template functions you can use for this purpose. You may find it more convenient to copy some other Template (perhaps page.php or index.php) to snarfer.php and then add the above five lines of code to the beginning of the file. That way, you will only have to alter the HTML and PHP code, instead of creating it all from scratch.

Once you have created the Page Template and placed it in your Theme's directory, it will be available as a choice when you create or edit a Page. (Note: when creating or editing a Page, the Page Template option does not appear unless there is at least one template defined in the above manner.)

LVL 70

Expert Comment

by:Jason C. Levine
ID: 36591071
I'll be the first to agree that setting up a template is the brute force method...

Assisted Solution

by:Alicia St Rose
Alicia St Rose earned 100 total points
ID: 36594021
What theme are you using? Can you give us a Url to the site? There may already be a class in the body tag you can use. I make child themes from Theme Hybrid and the developer has loaded all sorts of classes to the body tag including the page ID.
View source and see if you have several classes in your body tag. If not use Jeremyjared74's solution.
Simpler that creating a whole page template.
LVL 31

Assisted Solution

gwkg earned 100 total points
ID: 36601508
view the source of your page and check the body tag for a specific class that is unique to your page.

You should be able to find something you can use like

body.page-id-25 {


Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question