Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages »

how to use linked image sprites using css?

Old Feb 11, 2010, 12:40 AM
14 posts · Dec 2009
My site specializes in games,that is why I have to post a lot of pictures both in the body and the sidebars.but calling each image is an additional http request and slows page loading time.I'm using smart optimizer,phpspeedy plugin,minimized the image sizes,etc but nothing helped me save page loading time(wp cache,db cache are useless).people are complaining that my site is slow and I'm getting a high bounce rate.

so if I could use css sprites of images,that could help save innumerable http requests and page loading time.the only problem is that the images are linked and I don't know how to implement css spriting.So far I've been able to implement image sprites for my sidebar captions only.

In short I want to use css image sprite for all images of my site including header,background,body and sidebars and the ones in the body and sidebars are linked.Please help me,I've been looking for days to find a solution but didn't get one.
Old Jul 25, 2012, 10:44 AM
Lynn Rasmussen
10 posts · Jan 2011
I was successful at getting this to work by using the below examples. I added a 'Get Started' button that linked to a page with the same name. You need to:
1. Create a sprite image. see http://bit.ly/12d0wp or set up similiarly in image program (I used Illustrator). Mainly set up a before/hover image 2-up (my final size is 200px wide by 100px high). You then position what gets called by properly coding coordinates in the css.
2. Upload the image to the media library.
3. Add the html to the page you want it on.
HTML Code:
<p class="getstarted"><a href="http://socialenergizer.com/get-started/">Get Started<img class="getstarted" src="img_trans.gif" alt="" width="1" height="1" /></a></p>
4. Add the css to ATO>Add html/css inserts>CSS
.getstarted {
position: relative; left:795px; top:-145px;
.getstarted a {
background: url(http://socialenergizer.com/wp-conten...getstarted.png) no-repeat top left;
.getstarted a:hover {
background: url('http://socialenergizer.com/wp-content/uploads/2012/07/getstarted.png') 0 -50px;

This was also helpful in working this out. Good luck!


css sprites, image sprites, linked images sprite

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
Active page menu background image css help dixieprosser Page & Category Menu Bars 1 Mar 18, 2010 01:13 PM
%author-linked% and All-in-one-SEO artiflo Post-Kicker, -Byline & -Footer 11 Feb 1, 2010 07:32 PM
[SOLVED] CSS image sprite code required for sidebars over_cloud9 Sidebars & Widgets 1 Jan 12, 2010 07:25 AM
how to make header image linked to a post URL? dreamfree Header configuration & styling 3 Jun 13, 2009 02:54 AM
author-linked c32v Post-Kicker, -Byline & -Footer 1 Feb 26, 2009 06:43 PM

All times are GMT -6. The time now is 08:47 PM.

Powered by vBulletin® Copyright ©2000 - 2022, Jelsoft Enterprises Ltd.