• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

background image on a single WP page


bigdave

Moderator
Staff member
#1
I'm starting to really despise wordpress for it's never ending intricacies!...

I'm working on a site where the client has requested a specific page has an edge to edge background image. the max-width of the body is 960px so I cant contain the image within body tags but I wondered if php might come o my rescue?

Could I use something along the lines of

if ( is_page( 'nameofpage' ) ) {
get_header( 'nameofpage' );
} else {
get_header();
}


within the page.php file work to call a header containing a dedicated css file including the html background imange requested?
 

Corrosive

Moderator
Staff member
#2
I'm starting to really despise wordpress for it's never ending intricacies!...
I feel your pain... Oh no, wait, no I don't :icon_wink: That'd take you 15 seconds with a template variable in Modx but that would be far too logical for Wordpress.
 

Edge

Active Member
#5
I'm starting to really despise wordpress for it's never ending intricacies!...

I'm working on a site where the client has requested a specific page has an edge to edge background image. the max-width of the body is 960px so I cant contain the image within body tags but I wondered if php might come o my rescue?

Could I use something along the lines of

if ( is_page( 'nameofpage' ) ) {
get_header( 'nameofpage' );
} else {
get_header();
}


within the page.php file work to call a header containing a dedicated css file including the html background imange requested?
Create a new template with a body class you can leverage which is a slight variation on the default template (or whatever you are using for that page) - then use the new template for that page. Use the body class on the new template to change the max width to 100%. Put a container div inside with max width 960px. Now you can set your background image on the body element. Story. End of.
 

bigdave

Moderator
Staff member
#6
The solution I used was to use the ID given to the page by wordpress (in this case page-id-18) so..

body.page-id-18{
background: url('img/resbk.jpg') no-repeat;
background-size: 100%;
}