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.
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:
all the best,