A Simple Plan

"An attempt to rob a jewelry store failed dramatically when the shop owner shot one of the intruders. The men fled the store and jumped into a Ford minivan, where a waiting driver took them around the corner and they all switched to a Chevy Tahoe. The nervous robbers crashed their SUV into a parked car less than half a mile from the store, sending the four occupants running in different directions. All were quickly apprehended by police. The four uninjured suspects ages ranging from 18 to 22 who did not realize that the police station was only four blocks away from the jewelry store, were booked into the local jail." -Yahoo News

The styles for the quote:

.justforfun_div {
padding-right:51px;
background: url(images/smiley2.png) 97% 12% no-repeat;
background-color: #cdccc7;
border-radius:15px;
}

.justforfun_p {
background-color: #eeeeee;
padding:25px 30px;
font-family: tahoma, sans-serif;
}

The Markup is a paragraph enveloped in a div. We need the div to display the bitmap on the right padding. I did not start out with a bitmap. For me, a plain blue bar was more than enough but then I wanted to show how you would go about placing an image on the blue bar.

Initially I had drawn the bar via a simple border statement. Your first thought may be to place the image on that border but borders in CSS do not allow us to write over them. That's when the extra div for the smiling face came in.

Without any images, this would be even simpler with only a p tag, a right border and a right padding.

<div class="justforfun_div">
<p class="justforfun_p">
"An attempt to rob a  jewelry store .... only four blocks away from the jewelry store, were booked into the local jail." <i>-Yahoo News</i>
</p>
</div>
  

MULTIPLE BACKGROUNDS OF CSS 3

How about outputting two bitmaps one on each side? The styling for the div changes and keep in mind this will only work in a browser that permits the multiple backgrounds of CSS 3.0 in which you list the backgrounds back to back, separating them with a comma. The left padding will give us the blue strip that will contain the new image. I'll just be using the same bitmap but you can use something new.

.justforfun_div {
   background: url(images/smiley2.png) 97% 12% no-repeat,url(images/smiley2.png) 3% 90% no-repeat; 
   background-color: #aecae6;
   padding-right: 51px; 
   padding-left: 51px;  
   border-radius:15px;
   }