I am trying to convert a speech bubble image to html and css. The speech bubble looks like as number 1. in the image below - alt text

I divided this image into 3 pieces, as top (2), body, and bottom (3). And wrapped these up in a div as

<div class="box">
  <div class="top">&nbsp;</div>
  <div class="body"> some text content etc </div>
   <div class="bottom">&nbsp;</div>


    background:  url(top.gif) no-repeat left bottom;
.bottom {
    background:  url(bottom.gif) no-repeat left top;
    background:  url(body.gif) repeat-y left top;

I have used a thin slice from the center of the speech bubble to use as background image for content div but as this image is glossy and using gradient, it doesnt look very good. you can see output as in number 4 of the attachment. I am newbie and so couldnt think of any other idea to get a good looking output. Could you please advise whats the best way to slice this type of image. I need the box flexible height wise and width stays the same. Thank you.

3 answers


What I normally do is have the whole of the gradient (down to the solid color) as the top image and then have the expanding section as a solid color.

It's very hard to do expanding gradients with background images, but a gradient that fades to solid after a certain height looks reasonable.

Answered over 7 years ago by Tony Crockford
  • @Tony .. thanks for reply. I tried expanding section as solid color and it doesnt look good. over 7 years ago
Tony B 86

Try using a version of the middle that is 1px tall or one that is larger. Regardless of what you do, the gradient of the image should be linear either from top to bottom or from left to right for this to work. Cross-sections from radial gradients don't work. You can also try using the offset filter in photoshop for the middle section: it works by mirroring the edges of an image based on a pixel-offset that you input in the options.

Answered over 7 years ago by Tony B
Asmor 0

Change the gradient so that the middle is constant. I.e. instead of going from A-C, go A-B...B-C

Make the top image contain the entire A-B gradient, the bottom image contain the entire B-C gradient, and the middle one can tile vertically.

Answered over 7 years ago by Asmor