WordPress.org

Ready to get started?Download WordPress

Forums

CSS Sprites (2 posts)

  1. Rishi
    Member
    Posted 6 years ago #

    Hey everyone, first of all, my website is: http://www.rishi-kumar.com

    It has around 25 HTML requests per load (without Super-Cache), and about 22 of them are for images called for by the style.css. I've created a sprite with all the images and the website I used (http://spritegen.website-performance.org) also gave me some "rules." I'm not very familiar with CSS, so I was wondering if someone could aid me in making the proper substitutions.

    For example, here's a clip of some of my current style.css calling images:

    #searchform #s{
    	background: #ffffff url(images/form-field-bg.gif) no-repeat ;
    	height: 17px;
    	width: 148px;
    	margin: 6px 5px 0px 10px;
    	padding: 3px 7px 2px 5px;
    	color: #999999;
    	border: none;
    }
    #searchform #searchsubmit {
    	background: url(images/search-btn.png) no-repeat left top;
    	height: 24px;
    	width: 24px;
    	border: none;
    	text-indent: -999%;
    	line-height: 1px;
    	margin-top: 6px;
    }

    After generating my sprite using the aforementioned website, I received a list of "rules." Among these were the following, which I think match up with the two CSS terms from earlier:

    .form-field-bg { background-position: -2348px -1364px; }
    .search-btn { background-position: 0 -1166px; }

    Also, the website told me not to forget to add a background rule reference to the sprite image like this:

    #container li {
       background: url(csg-4878343169917.png) no-repeat top left;
    }

    All is where do I insert the reference to the sprite image... and how do I tell my style.css to use the parts of the sprite image rather than calling the images individually? Thank you!

  2. Jbert
    Member
    Posted 5 years ago #

    I am so glad I came across your post. I am stuck exactly where your post talks about. As usual, I see no post or replies. From what you posted, it looks like though, you are still using your original images in the URL line. I think these should be the sprite image you created on the generator page. Where I am stuck is how to incorporate the positions of each image in wordpress.

    Have you made any headway with this

    Jim

    wpobsessions@gmail.com

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags