background-position ?

[jamesx521]

I am trying to position an image in the right side of a div, but it gets placed on the left. Can you help out. Thanks.

.smallImages {
background-position: right;
margin-top: 11px;
margin-right: 14px;
margin-bottom: 11px;
width:111px;
height:62px;
border-style: solid;
border-width: 1px;
border-color: orange;
}
<div><p class="smallImages"><img src="images/SmallPhoto01.gif" width="111" height="62"></p></div> Inside the div, there is another <p> with styled text.

[jogol]

the code for the background image is written in the css file, not the (x)html.

.smallImages {
background: url(image.gif) no-repeat bottom right;
margin-top: 11px;
margin-right: 14px;
margin-bottom: 11px;
width:111px;
height:62px;
border-style: solid;
border-width: 1px;
border-color: orange;
}
Check this page (http://www.w3schools.com/css/css_background.asp) for an overview of background properties and parameters.

[jamesx521]

.smallImages {
background: url(image.gif) no-repeat bottom right;
margin-top: 11px;
margin-right: 14px;
margin-bottom: 11px;
width:111px;
height:62px;
border-style: solid;
border-width: 1px;
border-color: orange;
}
I tried background-image: as well
and
background-image: url(../images/SmallPhoto01.gif) no-repeat bottom right; too.

[thewebman]

post the url.

[jamesx521]

http://www.e-travelbg.com/PROBLEM1.htm
And the full CSS code:
.latestSpecials {
text-indent: 11em;
font-family: Verdana, sans-serif;
color: #666666;
font-size: 10pt;
line-height: 15pt;
letter-spacing: 0px;
text-decoration: none;
font-weight: 100;
text-indent: 0px;
margin-top: 11px;
margin-left: 15px;
margin-right: 14px;
margin-bottom: 11px;
}
.smallImages {
background: url(../images/SmallPhoto01.gif) no-repeat bottom right;
margin-top: 6px;
margin-right: 14px;
margin-bottom: 6px;
width:111px;
height:62px;
border-style: solid;
border-width: 1px;
border-color: orange;
}

[ShrineDesigns]

.smallImages img {
clear: both;
float: right;
}

[jamesx521]

This:
clear: both;
float: right;
puts the images to the right and wraps the text around them. What would be the alternative, to not have the text wrapped around? Thanks.

[LJK]

Hi -
It looks like the div you've placed them in as a background image
is only 111px wide - make it as wide as the other / content and
it should go to the far right as you've set it to do...

Good luck,
El

[ray326]

What would be the alternative, to not have the text wrapped around?Yes.

You've got two paragraphs in the first section of text. You should mark them up that way, not with breaks.

[jamesx521]

I see. I am using CSS border around the image, so when I extend the width, the text doesn't wrap around, but the border extends as well. So, to fix it, I'd put the border in Photoshop, not CSS.

How about controlling the wrap around. I am not rulling out using the text wrap around the image, but how do I controll the wrap around? Right now, the letters are too far from the images. Are the margins of the images pushing the text away?

Thanks.