Page Background Image

[dynamic]

Hello team

How can I add a specific image to just a page. The site has a background image but I want a specific page to have a background image. Should I create a new template and if so how do I add the image into the code or is there a plugin that works with genesis and the Corporate theme

http://www.coffeeculture.com.au

Thanks

[Jon Bellah]

Add a custom body class to your functions.php file:

add_filter( 'body_class', 'child_custom_body_class' );
function child_custom_body_class( $classes ) {
 if ( is_page() )
 $classes[] = 'custom-body';
 return $classes;
}

Then you can target that in your css with:

.custom-body {
Your background image here
}

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[dynamic]

I have tried the following plugin's and they all fail

Background per page
Background slideshow
Post Background
Post Backgrounds
WP Backgrounds Lite

All fail

[dynamic]

Thanks Jon, no joy

http://www.coffeeculture.com.au/

Parse error: syntax error, unexpected $end in /home/wwwcoffe/public_html/wp-content/themes/corporate/functions.php on line 69

[Jon Bellah]

Did you copy the [ php ] tag with it?

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[dynamic]

Jon, now fixed code, still not pulling custom background image

http://www.coffeeculture.com.au/wp-content/uploads/2013/01/home_back.png is the image

 

Charles

[Jon Bellah]

In the code, where it says if (is_page()) you have to insert the slug of the page you want to add the class to. For example, if ( is_page('about-us')).

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[dynamic]

No joy Jon

if ( is_page('welcome'))

was added into functions

.custom-body {
Your background image here
}
was added to style.css of corporate theme style sheet,

Charles

[Jon Bellah]

Where it says "your background image here" you need to input the URL to your background image... in this case:

.custom-body {
background:url(/wp-content/uploads/2013/01/home_back.png);
}

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[dynamic]

Jon

Line 739 of stylesheet says

.custom-body {
background:url(/wp-content/uploads/2013/01/home_back.png);
}

This code is in the style.css in the corporate theme folder

Hmm, not sure what is going on

[dynamic]

And this is what is in the functions page

/**
* Register a custom admin callback to display the custom header preview with the
* same style as is shown on the front end.
*
*/

add_filter( 'body_class', 'child_custom_body_class' );
function child_custom_body_class( $classes ) {
if ( is_page('cafe'))
$classes[] = 'custom-body';
return $classes;
}

I've tried to make it trigger on the cafe page , still no joy

It's just not pulling the background image

Charles

[Bill Murray]

I think you're missing 2 curly braces...

add_filter( ‘body_class’, ‘child_custom_body_class’ );
function child_custom_body_class( $classes ) {
if ( is_page(‘cafe’)) {
$classes[] = ‘custom-body’;
return $classes; 
}
}

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Jon Bellah]

The code is actually working. Add !important to your custom body class, so it looks like:

.custom-body {
background:url(/wp-content/uploads/2013/01/home_back.png) !important;
}

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[Jon Bellah]

Wish it would let me delete this... sorry double comment.

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[dynamic]

Jon,

Thanks it now works and now I realise I was asking for it to be just behind the content, not as the page background.

Thanks for your help so far

Any suggestions as to how I can now limit it to the body of the page content?

Charles

[Jon Bellah]

Sure, use:

.custom-body #inner {
background:url(/wp-content/uploads/2013/01/home_back.png) !important;
}

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[Author]

Posts