Title: CSS Image Sprites and PHP
Last modified: August 19, 2016

---

# CSS Image Sprites and PHP

 *  Resolved 759370
 * [17 years, 11 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/)
 * I finally got my theme the way I wanted it in WP, except for one thing; the CSS
   sprites that work on the rest of my pages refuse to function properly in the 
   PHP-based WP page. Instead of rolling the image up like they should, the entire
   button disappears. The link is still there, but the images are not. Is there 
   some PHP call or code that I need to insert to get the sprites to work? They’re
   sort of important, so I need to get them working.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [chaoskaizer](https://wordpress.org/support/users/chaoskaizer/)
 * (@chaoskaizer)
 * [17 years, 11 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816539)
 * any specific link? code?
 *  Thread Starter 759370
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816617)
 * sorry. The site is [http://www.hillsdalesigmachi.org/news](http://www.hillsdalesigmachi.org/news)
 * When you rollover, all you get is blank images when the images should roll up
   to reveal the hover image.
 *  Thread Starter 759370
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816618)
 * I’ve found a tutorial for applying the sprite technique to WordPress categories,
   but since my site is not entirely hosted by wordpress, it is of no use for me.
 *  Thread Starter 759370
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816619)
 * Here is the CSS code that I use for the navigation on the rest of the site. (
   which works everywhere but on the WP page) This code is a bit different than 
   some other sprite code, because the image starts at the top, and then rolls down.(
   most other code I’ve seen starts at the bottom and rolls up)
 *     ```
       .nav_container {
       	width: 875px;
       	padding-top: 0px;
       	margin-right: auto;
       	margin-left: auto;
       	float: none;
       	position: relative;
       	left: auto;
       	right: auto;
       	z-index: auto;
       }
   
       #navMenu{
       	display: inline;
       	padding: 0px;
       	width: 700px;
       	margin-right: auto;
       	margin-left: auto;
       	float: none;
       	height: 45px;
       	left: auto;
       	right: auto;
       	Z-index: auto;
       }
   
       #navMenu li{
       	float: left;
       	display: inline;
       }
   
       #navMenu li.first{
       	float: left;
       	display: inline;
       	width:25px;
       	height:40px;
       	padding:0px;
       	background-image: url("Images/LeftEnd.png");
       }
   
       #navMenu li.last{
       	float: left;
       	display: inline;
       	width:25px;
       	height:40px;
       	background-image: url("Images/RightEnd.png");
       }
   
       #navMenu li.spacer{
       	float: left;
       	display: inline;
       	width:165px;
       	height:45px;
       	background-image: url("Images/alphakappaseal.png");
       }
   
       a.navNews, a.navNews:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/News.png");
       }
       a.navNews:hover{
       	background-image: url("Images/News.png");
       	background-position: 0 90px;
       }
       a.navNews:active{
       	background-image: url("Images/News.png");
       	background-position: 0 45px;
       }
   
       a.navRush, a.navRush:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/Rush.png");
       }
       a.navRush:hover{
       	background-image: url("Images/Rush.png");
       	background-position: 0 90px;
       }
       a.navRush:active{
       	background-image: url("Images/Rush.png");
       	background-position: 0 45px;
       }
   
       a.navAlumni, a.navAlumni:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/Alumni.png");
       }
       a.navAlumni:hover{
       	background-image: url("Images/Alumni.png");
       	background-position: 0 90px;
       }
       a.navAlumni:active{
       	background-image: url("Images/Alumni.png");
       	background-position: 0 45px;
       }
   
       a.navAbout, a.navAbout:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/About.png");
       }
       a.navAbout:hover{
       	background-image: url("Images/About.png");
       	background-position: 0 90px;
       }
       a.navAbout:active{
       	background-image: url("Images/About.png");
       	background-position: 0 45px;
       }
   
       a.navLogin, a.navLogin:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/Login.png");
       }
       a.navLogin:hover{
       	background-image: url("Images/Login.png");
       	background-position: 0 90px;
       }
       a.navLogin:active{
       	background-image: url("Images/Login.png");
       	background-position: 0 45px;
       }
   
       a.navDonate, a.navDonate:active{
       	display:block;
       	float:left;
       	width:110px;
       	height:45px;
       	background-repeat:no-repeat;
       	background-image: url("Images/Donate.png");
       }
       a.navDonate:hover{
       	background-image: url("Images/Donate.png");
       	background-position: 0 90px;
       }
       a.navDonate:active{
       	background-image: url("Images/Donate.png");
       	background-position: 0 45px;
       }
       ```
   
 *  Thread Starter 759370
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816621)
 * I believe after tinkering with it that the CSS code isn’t being read properly
   for some reason. Does anybody have any tips on how to fix this?
 *  Thread Starter 759370
 * [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816622)
 * This is absolutely bizarre.
 * I changed the values in the code where it moves the images from positive to negative,
   and they’re working now. Maybe there’s a bug in WP that caused it to be reading
   it backwards?

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘CSS Image Sprites and PHP’ is closed to new replies.

 * 6 replies
 * 2 participants
 * Last reply from: 759370
 * Last activity: [17 years, 10 months ago](https://wordpress.org/support/topic/css-image-sprites-and-php/#post-816622)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics