Creation of Sprite Image using CSS and HTML

Question

I'm trying to build a webpage that uses one large sprite. Instead of composing the sprite in photoshop or some third party software, I would like use HTML and CSS to arrange the images and then render the compilation as one single JPEG.

Is there anyway to accurately render an HTML page as a JPEG?

To clarify: Basically, I want to create a web page using html and css, render it as one single image, and then use that image as a sprite on a different web page. So I would just be compiling my "image" in HTML and CSS instead of building it in photoshop.

Your question is difficult to follow. Consider re-wording it. — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 25, 2012 at 20:10
Is this just a one time deal for you to generate a sprite, or do you want this to work for every visitor to your page? — j08691
– j08691, Commented Jul 26, 2012 at 15:10
I'm trying to create a template so that I can easily switch out details of a sprite such as changing one particular source image. But I'm using css styles such as border-radius and box-shadow on the individual images within the larger sprite, so it's very time consuming to do it in photoshop or third party — William Smith
– William Smith, Commented Jul 26, 2012 at 15:24
I finally found the answer I was looking for: stackoverflow.com/questions/757675/… — William Smith
– William Smith, Commented Jul 29, 2012 at 20:00

Madara's Ghost · Accepted Answer · 2012-07-26 15:07:18Z

3

Yes, it's called Print Screen. PrtScr

answered Jul 26, 2012 at 15:07

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

William Smith Over a year ago

come on now...print screen won't accurately capture the dimensions so that the sprite coordinates (for the JPEG) are the same as the original CSS coordinates.

Madara's Ghost Over a year ago

@WilliamSmith: You'd get a full image of your website, which is perfectly usable in sprites.

Madara's Ghost Over a year ago

@WilliamSmith: If your website is large, there are plugins like Awesome Screenshot for chrome, that can automatically capture an entire page for you.

Collectives™ on Stack Overflow

Creation of Sprite Image using CSS and HTML

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related