Community Forums › Forums › Archived Forums › Design Tips and Tricks › Page Background Image
Tagged: background images
- This topic has 15 replies, 3 voices, and was last updated 12 years, 1 month ago by
Jon Bellah.
-
AuthorPosts
-
January 14, 2013 at 7:34 am #11803
dynamic
ParticipantHello 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
January 14, 2013 at 7:39 am #11804Jon Bellah
MemberAdd 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
January 14, 2013 at 7:40 am #11805dynamic
ParticipantI have tried the following plugin's and they all fail
Background per page
Background slideshow
Post Background
Post Backgrounds
WP Backgrounds LiteAll fail
January 14, 2013 at 7:46 am #11807dynamic
ParticipantThanks 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
January 14, 2013 at 7:48 am #11809Jon Bellah
MemberDid 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
January 14, 2013 at 7:49 am #11810dynamic
ParticipantJon, 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
January 14, 2013 at 7:51 am #11811Jon Bellah
MemberIn 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
January 14, 2013 at 7:57 am #11812dynamic
ParticipantNo 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
January 14, 2013 at 8:28 am #11820Jon Bellah
MemberWhere 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
January 14, 2013 at 8:35 am #11824dynamic
ParticipantJon
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
January 14, 2013 at 8:56 am #11828dynamic
ParticipantAnd 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
January 14, 2013 at 9:24 am #11836Bill Murray
MemberI 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.
January 14, 2013 at 9:27 am #11837Jon Bellah
MemberThe 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
January 14, 2013 at 9:28 am #11838Jon Bellah
MemberWish 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
January 14, 2013 at 4:26 pm #11952dynamic
ParticipantJon,
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
January 14, 2013 at 6:00 pm #11966Jon Bellah
MemberSure, 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
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.