I am designing a mini basket which will appear at the top of the page. It will display the quantity of goods in the basket and total price and a 'click here to check out' button. So it is just a summary of the basket.

I want to design an image which will feature behind this mini-basket. For an example see Play.com (UK): DVDs, Music CDs, MP3s, Video Games, Books, Electronics & Gadgets - Free Delivery. Add anything to the basket to see the mini-basket at the top right of the screen in action. This may not be a background image - if you can suggest how I can achieve this mini-basket I would be very grateful.

Quantity =1
Total = 149.95
Click here to checkout

The only way I know how to get an image behind some text is like this:

.basket-details {
background: url(../himage.png) no-repeat;
clear: both;
color: #FFFFFF;
letter-spacing: -0.02em;
line-height: 1.7;
margin: 5px 5px 5px;
padding: 0px 0 0px 0px;

But it does not seem accurate enough! I am aware that I could use CSS positioning but I have been advised against using positioning in the past so I am unsure how to achieve the right results!

Can anyone help,