Two images either side of Div

HTML & CSS
1

I’m experimenting and trying to put together a decent container for a testimonial.

I really like the look of this…

… But when I thought about it, I don’t even know I would do such a thing with the quote images on either side.

How can that be done using CSS?

Here is what I have at present.

.testimonialquote {
background:#F7F7F7 url (images/quote.png) no-repeat scroll 0 0;
float: left;
width: 400px;
font:italic 12px Georgia, "Times New Roman", Times, serif;
margin: 0 0 15px 0;
padding: 10px 20px 10px 20px;
text-align: justify;
border:1px dashed #ddd;
}


<div class="testimonialquote">
<strong>Carme O'Callagha;<br/></strong>
I really got a great amount out of the day it covered all my objectives and more and the one to one training was excellent. I really got a great amount out of the day it covered all my objectives and more and the one to one training was excellent.
</div>
2

If you follow this article you’ll get it working :).

Hope that helps.

3

That’s not quite what I’m looking for.

I want an Image on the top left and bottom right. With the text justified and padded out from both sides.

4

You see I have this below set up and it works on my fire fox but it’s limited to Browse. Firefox has supported multiple backgrounds since version 3.6 (Gecko 1.9.2), Safari since version 1.3, Chrome since version 10, Opera since version 10.50 (Presto 2.5) and Internet Explorer since version 9.0.

blockquote {
	background-image: url(images/quote.png), url(images/quote.png);
	background-repeat: no-repeat;
	background-position: 1% 8%, 99% 92%;
    width: 800px;
	text-indent: 10px;
	text-align: justify;
	font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
	margin:0 0 15px;
	padding: 15px 65px 15px 65px;
	border: 2px dashed #ddd;
}

Plus I’m limited to only using colour of the background of the quote too.

5

I put the quote images in a span and used the following css when I did this…

#quote span {
display:inline-block;
width:18px;
height:13px;
margin-right:7px;
vertical-align:top;
background:url(/images/quotationmark1.jpg) no-repeat;
}
#quote span#two {
margin-left:6px;
vertical-align:bottom;
background:url(/images/quotationmark2.jpg) no-repeat;
}

  • html #quote span#two {margin-top:3px;}