Structure of CSS background images

HTML & CSS
1

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:
MFL

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:
wah

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

Hi,

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;
    [B]float: left;
    height: 100px;
    width: 100px;[/B]
}
#adult {
    background-image: url("/2011/tickets/regulars/390x100/i02.png");
    background-repeat: no-repeat;
    [B]float: left;
    height: 100px;
    width: 390px;[/B]
}

all the best,