Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win


add background image to specific page

Posted on 2011-09-23
Medium Priority
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
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
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 400 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 800 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?
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

LVL 23

Accepted Solution

jeremyjared74 earned 800 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 400 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 400 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

Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

610 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