I have a blue chat bubble that I’m using as a background image. I’m trying to figure out the best approach for displaying an icon image and text on top of it. The icon would be on the left and the text, “Chat now”, would be on the right. Both icon and text would be on top of the blue background image. Any suggestions on how to approach this? Thanks in advance for any help on this.
I’ve got it working, but am still interested in seeing if there’s a better way. I just set up a div called blueChat and set the blue chat bubble as the background. Then I set up a div inside it that contains a simple a href surrounding the img src for the icon and the text.
I would be best that you include both your relevant CSS and HTML code when posting… even better if you can post a link. There are no one size fits all solutions, so it is best to see the actual implementation.
That being said, the following is just a conceptual solution. Anyhow you were CLOSE in your solution. You dont need the IMG for the icon nor the extra div.
IF I can assume the the “chat now” is a LINK within a branding ( image) area then you could code it this way:
<div class=“bubble”><a href="chatPage.html>Chat Now</a></div>
.bubble{position:relative;
background: url (bubble.jpg) no-repeat;
height: (height of bubble.jpg) ;/optional/
width: (width of bubble.jpg);/optional/
}
.bubble a{
position:absolute;
padding-left: (width of icon + white space);
background: url(icon.jpg) no-repeat (1/2 of whitespace)px center;
min-height: (height of icon);
top: ( use this to position your ‘button’);
left: ( use this to position your ‘button’);
}
again that’s just a rough idea… but hopefully it helps