SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    0 Post(s)
    0 Thread(s)

    Structure of CSS background images

    Structure of CSS background images

    I'm posting this in a few CSS / HTML forums.

    I think this is a knucklehead basic CSS question, but I can't seem to wrap my head around it. I'm not experienced with background-image attributes, and I thought I was setting out to do something simple but it has loused me all up.

    Here's an image

    with two parts - the 'swan box' on the left and the 'graphic' on the right. It is used inside a collapsible panel, with text overlaid on both halves, as here:

    I'm trying to separate out the two parts of the image, and build a box using CSS in this model:

    and am getting this result instead:

    My goals in trying to separate it are two fold. For one, the 'swan box' is the same in every graphic, so I'm trying to save a bit of bandwidth; mostly, though, I generate the Spry code in FileMaker, and would like to automate the image placements (by having FileMaker script a call for styles that themselves call for background images, rather than insert the images manually, one at a time, while I create the CollapsiblePanels in Dreamweaver).

    Any help is appreciated.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Victoria, Australia
    28 Post(s)
    2 Thread(s)

    background images don't effect the dimensions of an element.

    So you can have a 1500px x 1500px background image on a 100px 100px block and only show part of the background image.
    It's best practice not to specific such strict heights on elements with text - so that it's flexible with more text or larger font-sizes.

    But, those things aside all you need to do is float the blocks left and give them widths & heights:
    #i02 {
        background-image: url("/2011/tickets/regulars/100x100/adult.png");
        background-repeat: no-repeat;
        float: left;
        height: 100px;
        width: 100px;
    #adult {
        background-image: url("/2011/tickets/regulars/390x100/i02.png");
        background-repeat: no-repeat;
        float: left;
        height: 100px;
        width: 390px;
    all the best,

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts