Help please

aikman

New Member
Hi

I'm not sure how I should explain my question but I will try.
I've got a .png file with all the background graphics to the webpage. Ex. top, search, footer.

And in the .css the class point on this .png file like this(background:url(images/layout.png) no-repeat -292px -39px;

Is there anyone that can explain how it´s work, whats the file is called and if there any website with information how to create this image file.

really need help to this!

regards
hakan
 

Attachments

  • temp.jpg
    temp.jpg
    7.2 KB · Views: 19

leroy30

New Member
To elaborate on what Phreadee said: Google 'css image sprites'. You can use 'background-position' in conjunction with a fixed size to display only a section of the image.

This technique is useful for optimising page speed as there are less requests back to the server.
 

Phreaddee

Super Moderator
Staff member
thanks leroy, I was a bit ambiguous.

not only is it less requests, but overall its usually a smaller file size.

take for instance a very image heavy stylised menu, (albeit say only a few colours tho, and it cant really be translated into css) 7 items. each with a different image for the rollover. 14 images. you might be able to get each image down to a 4kb png, but still that equates to 14 requests @ 56kb, as an image sprite the entire image could be optimised to say 25kb, so you've cut your requests down to 1 and halved your overhead. its a win-win situation really.

in fact image sprites are pretty much the entirety of what I use when inputting graphical elements onto a website. The rest I use css.
since image sprites are not a "design" but an assets sheet, I find it a lot easier to just create the sheet, rather than make a design, then extract the image elements and combine them into a sheet. thus in essence making the whole PSD design phase completely redundant.

I harp on about this a lot and I'm sure rusted on "designing websites in PS" type folk just roll their eyes at me, but seriously, once you separate yourself from that step of the process it gains you so much more freedom.

sure at first css only designs can look awful, i'm not denying that, and its easier to get it to that stage and just go "oh well it looks crap, i'll just make it in PS and then slice it" or whatever, but a little persistence, and googling questions you can get it looking pretty good in no time at all.

then you can assess what is outstanding in the design (UI elements, social media icons, logos etc) and build them as a sprite sheet in fireworks.
making sprite sheets with fireworks is a piece of cake. (and funnily enough its not that dissimilar to slicing) once you are happy with the results save the sheet itself as an optimised png, and output the css from the css properties panel.

you can always do the "guess the position" and just wing it in your favourite editor, or many other ways too, but that's just how I do it...
 
Top