Changing background image on one page only

[LZera]

Hi all,
Is it possible to change the background image on only one page with the Beautiful theme (and have all the other pages with the primary image)?

Thanks!

http://laurazera.com

[Brad Dalton]

This might help http://wpsites.net/web-design/display-different-after-header-images-in-beautiful-pro-theme/

---

Tutorials for StudioPress Themes.

[LZera]

Hi Brad,

Thank you. This is definitely getting me on the right track. There's a 4th scenario that I'm looking for, though, and that is:
DISPLAY DEFAULT IMAGE ON FRONT PAGE AND ALL OTHER PAGES & 2ND IMAGE ON ONE SPECIFIC PAGE

I tried to jury rig it by using the default image as the third image, but that ended up giving me a double (stacked) default image on the home page.

[Badlywired]

Use this approach I detail here
http://badlywired.com/2015/applying-styling-specific-wordpress-page/

using the css (assume your page is 123 )

body.page-id-123 { background-image: url("path to image") }

Depending on you exact requirements / theme you may need be more specific e.g.

body.page-id-123 .site-inner { background-image: url("path to image") }

whatever your 'default' background css selector is

---

My techy blog WordPress and stuff badlywired.com

[LZera]

Hi Badlywired,

Thanks for jumping in here. My knowledge of web dev is novice, so let me make sure I'm following. Now that I have the page ID and image URL, I want to insert this line of code:

body.page-id-15146 { background-image: url(“http://laurazera.com/wp-content/uploads/2015/01/header-two.png”) }

Where in the css do I insert this?

[Badlywired]

Hi,

Looking at your site I am assuming you are wanting to change the custom header background strip not the background of teh WHOLE page (which is what your code would do)

In which case your CSS needs to be more qualified to target the custom background

body.page-id-15146 .custom-background .site-header-banner {
background: url("http://laurazera.com/wp-content/uploads/2015/01/header-two.png") 
#ffffff no-repeat center scroll;
}

See here how I worked that out http://screencast.com/t/Io0EsIECk4lu

The CSS needs to go in your child themes' style.css file it can go at the end (or anywhere really)
wp-content/themes/beautiful-pro/style.css

---

My techy blog WordPress and stuff badlywired.com

[LZera]

Hi,
I inserted that code at the end of the style.css and nothing happened. I also tried the code below (a snippet I found on one of the posts that Brad linked to above earlier):

.page-id-15146 .site-header {
background: url("http://laurazera.com/wp-content/uploads/2015/01/header-two.png") no-repeat scroll 0 0 transparent;
}

I also found this info in one of the posts, which I'm thinking may be the problem: "Note: If you added your header image using the Custom Header uploader under the Appearance menu in your dashboard, it will display site wide therefore you will need to remove it conditionally on the pages you want to add a different header using CSS code..."

I'm not sure how to remove it conditionally on the page to try this.

[Badlywired]

My code should work with your theme if you put it in as it should override the the css for that page, conditionally.

But it isn't in your style sheet so I can't debug any issues with it

see http://laurazera.com/wp-content/themes/beautiful-pro/style.css

If you add my code back in, I'll take another look at your page http://laurazera.com/?post=15146

and tell you if it needs any tweaking to make it work.

---

My techy blog WordPress and stuff badlywired.com

[Genesis Developer]

If you have not enough idea about coding then you can use BACKGROUND MANAGER plugin . You can easily setup the background image from dashboard for any pages.

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[LZera]

Hi Genesis Develop,
It looks like that plug-in handles the whole background of the site, whereas I'm trying to manipulate the background banner image (the daisies image on my site).

Badlywired, I've added your code back in. I will also want to make the same change for the sub-menus under this page, so would I just add the same code again, with each specific page id? Thanks for troubleshooting, I appreciate it.

[Badlywired]

There is missing } at the end of your style.css

Try again but put the code immediately before
/*

Media Queries
---------------------------------------------------------------------------------------------------- */

And then check the page
http://laurazera.com/?page_id=15146

---

My techy blog WordPress and stuff badlywired.com

[LZera]

I'd tried it before with the } but then had wondered if I had one too many at the very end of the stylesheet; however, it didn't work either way. Have now inserted it before Media Queries, but argh, still nothing.

[Badlywired]

OK change it to

body.page-id-15146  .site-header-banner {
background: url("http://laurazera.com/wp-content/uploads/2015/01/header-two.png") 
#ffffff no-repeat center scroll;
}

That is working for me

---

My techy blog WordPress and stuff badlywired.com

[LZera]

Success! That rocks, thank you, thank you!

Am I overstaying my welcome if I ask for help with the sub-menu pages?

I tried repeating that code with the other page ids but it didn't work; my guess is that it needs some kind of reference to both parent page and sub page.

[LZera]

Whoa, the other pages (sub-menu pages) work now, too. Weird that they didn't at first, and I didn't change anything, but I won't complain!

Again, thanks for all the help!

[Badlywired]

Browser cache CSS so if you are making changes and they dont appear at first it is always worth clearing your cache
http://www.wikihow.com/Clear-Your-Browser%27s-Cache

---

My techy blog WordPress and stuff badlywired.com

[Author]

Posts