Change Body Background Image for Different Pages

  • Resolved Beksters Lab

    (@beksters-lab)


    11 years, 9 months ago

    Hi, I was wondering if someone could help me please? I know this question has been posted and responded to many times as I’ve viewed and tried to replicate the code to get it working on my site and none of it works. I have no idea what I am doing wrong so would appreciate any help.
    I am using the twenty eleven theme and am making edits to a child theme. I am trying to change the background of the body of each page to a different image. I have uploaded the background image I want to display on the home page in the appearance tab and this displays as intended. However when I try any of the multitude of suggested ways to change the background image for other pages, nothing happens and I am completely stumped as to why.
    The url is: http://www.1978bektest.co.uk/test/
    As a test, I wish to change the background image for the contact page (id=14) to contact-page-tile.jpg which is uploaded to the server in the images folder of my child theme (http://www.1978bektest.co.uk/test/wp-content/themes/twentyelevenchild/images/contact-paper-tile.jpg)
    Can anyone tell me exactly how to do this please as I cannot get it to work. Thanks for your time.

Viewing 5 replies - 1 through 5 (of 5 total)
  • wpismypuppet

    (@wordpressismypuppet)

    11 years, 9 months ago

    Personally I wouldn’t use a “theme” to change the background image of the body tag. I would use CSS. Are you familiar with CSS?

    Every page has a unique ID, as you’ve already pointed out. The <body> tag has a function called body_class() that pumps out a bunch of different “classes” for the <body> tag itself. One such class will always be page-id-#, where # is the id of the page you are looking for.

    In your style.css file, you can specify:

    body {
background: url('images/background.jpg');
}

    Then for any specific page you want to change the background on:

    body.page-id-14 {
background: url('images/newbackground.jpg');
}

    Instead of uploading your images through WordPress itself, just FTP them into the images folder on your server.

    Michael

    (@alchymyth)

    11 years, 9 months ago

    because the theme embeds/outputs the style for the custom background into the head section, you might need to force your alternative style with !important to overwrite the default.

    example:

    body.page-id-14 {
	background-image: url('http://1978bektest.co.uk/test/wp-content/themes/twentyelevenchild/images/contact-paper-tile.jpg')!important;
	background-repeat:repeat-y;
}
    Thread Starter Beksters Lab

    (@beksters-lab)

    11 years, 9 months ago

    Thankyou both, that has finally worked. I had previously already uploaded the images to the server and also uploaded them both in the appearance tab due to following different tutorials. I’d tried referencing both images in the css with links to my images folder on the server as suggested above but it didn’t work. Now that I’ve removed the files from the appearances tab it works perfectly. The only slight modification I had to make was to specify the home class for body:

    body.home {
	background: url('images/gallery-paper-tile.jpg');
}

    Thanks again for your help, headache over!

    wpismypuppet

    (@wordpressismypuppet)

    11 years, 9 months ago

    You are welcome

    Seth Burleigh

    (@sethburleighgmailcom)

    11 years, 3 months ago

    Hi All,

    I am trying to do this, but instead of page-id, I’m trying to apply the unique body CSS to a page template.

    When I insert page-template-(template file name) – in my case home_corechella, so I have body.page-template-home_corechella, the body for my entire site breaks. Do I need to force it with !important?

    Any ideas? Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change Body Background Image for Different Pages’ is closed to new replies.