Cafe Pro: disable parallax scrolling on all but home pg; diff photo on each page

[sawgls]

QUESTION 1: I'm working on my first customized WordPress site for a client after only building sample WP sites. I've had to do lots of customization which I've figured out, but now I'm stuck. Client wants only the home page to have parallax scrolling. How do I disable parallax scrolling on all other pages? I've tried a few different bits of code I found online, but so far nothing has worked. I'm using the Simple CSS plugin so I'm curious if I can add something there to achieve this or if I need to insert code in the stylesheet. I have tweaked CSS and html in the past using Dreamweaver and I've made some changes to the WP stylesheet for this site, but my CSS and overall coding skills are pretty limited (at the moment). Any specifics will be much appreciated!

QUESTION 2: My client wants a different photo on every page of their site, but Cafe Pro uses the background image on every page. I'd like to have the background image on the home page with parallax scrolling (that's working fine). Then, on all other pages, no parallax and a different header photo on each of the other pages. I've tried some code provided by StudioPress tech support as well as some found online, but so far I've been unsuccessful.

If it matters, I'm working on the site locally right now. I appreciate any and all help...THANKS!

[William]

Q1: Parallax only works on the homepage 🙂 [if you are working with a studiopress theme]

Q2: Set the featured image as a background image !

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[jzvestor]

On Q2 what do you mean "set the FI as a bg image"? I tried setting the FI for a page but the img did not appear in the header. Is this something that can be done in the functions file?

[sawgls]

Q1: I specified in my questions that I'm using Cafe Pro (a StudioPress theme). Every page of the site is parallax, not just the home page.

Q2: I have set the featured image as the background image and it appears on every page of the site. That's the problem. I don't want a background image on every page. I want to use a different header image on every page.

[William]

I would like to help you but you are going to need a live a website 🙂 So someone can show you how make the changes !!

---

Genesis Customization Service | Quick fixes whenever you need them ! | Contact me at Fixmysite.com !

[jzvestor]

I have a live site using cafe pro with the same header image question, you can see it here: http://grousemtnconsultants.com/gmc/

[carasmo]

That's not Parallax, it's css position:fixed and background-size: cover. Use CSS specificity to make the attachment fixed only on the home using the body class:

Before

.front-page-header,
.image-section {
	background-attachment: fixed;
	background-color: #fff;
	background-position: 50% 0px;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

After

.front-page-header,
.image-section {
	background-color: #fff;
	background-position: 50% 0px;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

.cafe-pro-home .front-page-header  {
	background-attachment: fixed;
}

Use CSS to find the class on each page and change the path to the new background. You can add a function that will add the slug of the post/page on the body. There are many pages that can be generated, including archives and taxonomy archives, so the home image used will be the fallback.

Use a code editor and FTP to add this to the end of your functions.php file outside of all other functions or use My Custom Functions plugin,

/**
 *
 * Add Page/Post Body Class Slug
 *
 * post-slug-for-post
 * page-slug-for-page
 *
 * @since 1.0.0
 *
 */
function yourprefix_page_slug_body_class( $classes ) {
	global $post;
	if ( isset( $post ) ) {
		$classes[] = $post->post_type . '-' . $post->post_name;
	}
	return $classes;
}
add_filter( 'body_class', 'yourprefix_page_slug_body_class' );

---

Genesis Theme Customization and Help

[carasmo]

To use that CSS you will need to edit your child style.css file directly and find the original property. Otherwise use the CSS plugin but use scroll as the value for the default and use fixed for home. Copy out only the CSS that does not over-ride the previous. Make sure your plugin hooks AFTER the child CSS

.front-page-header,
.image-section {
	background-attachment: scroll;
}

.cafe-pro-home .front-page-header  {
	background-attachment: fixed;
}

---

Genesis Theme Customization and Help

[jzvestor]

thanks!

[mrrevolution]

This thread helped me tremendously in being able to put different header images on each page... thank you so much!

I am having one issue however... The image is not displaying on mobile devices correctly anymore. Any idea what I might have done wrong? Just on the home page. The other pages work fine.

http://www.callahanspub.com/

Thanks!

[Author]

Posts