DW Page Modern change parallax background in child theme

I’m using your one-page DW Page Modern theme with my own child theme. It’s looking and working great so far. I did as I saw written in your forum to replace the parallax background image of the section.home by replacing the image in the parent img directory. After the recent theme update, all my custom images were overwritten in the parent img directory. I tried using the following code in my child theme so this wouldn’t happen in the next update, but then the images are static and they loose the parallax motion.

.section.home {
background: url(“graphics/header-bg.jpg”) no-repeat 50% 0 #999999;
}

How do I replace the parallax images so they are not overwritten during parent theme updates?

2 Answers

Wilfred
answered 10 years ago

Hi Trishah,
To resolve this issue please follow my instruction here:
1. Open style.css file in child theme, then add the following code

/*
Theme Name: Child theme
Template: dw-page-modern
*/
@import url("../dw-page-modern/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */
body {
 background-image: url(img/header-bg.jpg);
}
.section.portfolio,
.section.blog {
 background-image: url(img/portfolio-bg.jpg);
}

2. Create an img directory in child theme, then replaces the image in the parent img directory.
Hope this helps!

Trishah Woolley
replied 10 years ago

Ahhh… It needs the images in an /img/ directory and only use the background-image property. Got it. It works great. Thank you.

As a suggestion to the DW team, maybe this can be added to the documentation? Thanks.

Wilfred
answered 10 years ago

Thanks for your suggestion. We will discuss to add the instruction above to the documentation in next time.