Solved

add background image to specific page

Posted on 2011-09-23
7
357 Views
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

0
Comment
Question by:COwebmaster
7 Comments
 
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.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
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.
0
 

Author Comment

by:COwebmaster
ID: 36590612
what are the steps to setting up a template page, then adding in that code?
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 23

Accepted Solution

by:
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:

<?php
/*
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.)

LINK:
http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
0
 
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...
0
 
LVL 7

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.
0
 
LVL 31

Assisted Solution

by:gwkg
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 {

}
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

832 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