Hello again,
I'm working on a menu bar in which each individual link has its own background image (the "home" link has its own bg image, the "ads" link has its own background image, etc.)

I've got that all working correctly.
What I CAN'T figure out is how to configure the "current page item" function to work with the individual background images.

So, for example, if a user is on the home page, I want the hover state of the home button to be displayed. If they're on the ads page, I want the hover state of the ads image to be displayed.

This is what I have currently, but it's not working (obviously):

div#menu1 ul.rMenu li.page-item-2 current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat;
height: 150px;
width: 100px;
}
div#menu1 ul.rMenu li.page-item-4 current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat;
height: 150px;
width: 100px;
}

Link to site: http://www.laurenacooper.com/lostpets

I know I probably just have the code syntax incorrect. Any help is greatly appreciated

It took me a bit but try this.

div#menu1 ul.rMenu li.page-item-2.current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat !important;
height: 150px;
width: 100px;
}
div#menu1 ul.rMenu li.page-item-4.current_page_item a {
background: url(http://www.laurenacooper.com/lostpets/wp-content/themes/atahualpa/images/home_button.png) -100px 0 no-repeat !important;
height: 150px;
width: 100px;
}

It comes down to no space between the last two classes and an !important at the end of the image path. You can also leave out the div#menu1 ul.rMenu li. on each line if you like

That worked like a charm! Thank you so much!