Background-Position Left

Hello. I'll start with what I am trying to do.

I want to use the CSS background-position to place text to the RIGHT of an image.

I've got my CSS successfully moving the image to the right of my text but I want the exact opposite. I want the image on the left and the text on the right. Below is my CSS code that moves the image to the right.


.header {
background-image: url(head.png);
background-position: 50px;
background-repeat: no-repeat;
color: #FFFFFF;
font-family: verdana;
padding: 3px;
vertical-align: middle;
margin-left: 15px;
}


Again, how can i ahcieve the exact opposite? Thanks.

Hello stevenmw,
I'm not sure why you would want to use a background image to wrap text around...that would normally be don't with a float.

Still, it could be done with margins on the text...

Maybe you should have a look at a good float tutorial first?
http://css.maxdesign.com.au/floatutorial/

I want it all done within a single div. I don't want to use html image code at all. I want one div with text and the image.


There's two obvious ways to achieve what I want.

1. use the html image code along with a div
2. use two divs and float the div containing the image the the left.

With option 1 i'd have to use html image codes.. With the second I'd have to use two divs.

My purpose is to use only one div. This way all I have to do is call a single div and place text inside of it when ever I want to repeat style.

I want the image on the left and the text on the right.Align the background image to the left using the background-position property, and use the padding-left or text-indent properties to move the text to the right and away from the background image.

Thanks, Arbitrator!

use firebug firefox addon . you can change css live and see the changes , use it !!!