Slicing Images in CSS

Discussion in 'CSS' started by buckmajor, May 9, 2009.

0
  1. #1
    Hi there

    I found this site and was wondering if they used the one big image for their e.g. footer, model boxes, header etc all together for the CSS image placement?

    I never thought of it before or didn't know you could this in CSS but I guess it's possible to do almost anything with CSS.

    Here is the link and right click on the top header image and view 'Background image' and hopefully you'll get what I mean.

    Would anyone have an idea if this was used in a box model with the exact size and moving the 'Background image' in the correct spot?

    Many thanks in advance
    CHEERS :)
     
    buckmajor, May 9, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    The technique is called 'image recombination' and is yet another optimization that can lead to faster loading pages and less server strain. It is why I developed my "Eight corners under one roof" technique... and used on many of my page rewrites the past couple years.

    Take a look at this template of mine (which was very much WIP at the time I uploaded it to that test location) for an upcoming rewrite of said website (which I'm hoping to launch sometime early 2010):

    http://battletech.hopto.org/site_designs/CBT4/template.html
    Code (markup):
    It makes extensive use of those types of techniques:

    Primary theme images: http://battletech.hopto.org/site_designs/CBT4/images/themeImages.png

    Web partner hovers: http://battletech.hopto.org/site_designs/CBT4/images/webPartners.png

    Language Links: http://battletech.hopto.org/site_designs/CBT4/images/languages.gif

    Even the font used on headings (which is applied over the inlined text automatically using javascript, scripting off you get plaintext) http://battletech.hopto.org/site_designs/CBT4/images/font_weltronUrban.gif

    If you read my "Eight corners under one roof" page I explain the advantages of recombining images - less handshakes resulting in faster loads, combined pallettes meaning smaller files, combining hovers resulting in no need for the 'precaching' nonsense used by javascripted hovers, etc, etc.

    It really is the same technique as putting all your hover states for an image based menu into one file - just taken to an extreme.
     
    deathshadow, May 10, 2009 IP
  3. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #3
    My man Deathshadow :)

    True! So that's how it's done. I had a funny feeling it was only using one image. So that's what they call it 'image recombination'. I will read those links and post back as soon as I get it working.

    Thanks D
     
    buckmajor, May 11, 2009 IP
  4. crazyFoo

    crazyFoo Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Yeah, DeathShadow's technique is awesome. I've used it on multiple sites.
     
    crazyFoo, May 11, 2009 IP
  5. buckmajor

    buckmajor Active Member

    Messages:
    574
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Hey D, I figured it how to use it now...its a wonderful feeling to know.

    Again, thanks abundantly
    CHEERS :)
     
    buckmajor, May 20, 2009 IP