How to pad text within an image in CSS

HTML & CSS
1

Hello,

I want to add text to a background image like below:

.image {
position:absolute;
background-color:#fff;
width:500px;
height:500px;
background-image:url(images/sample.gif);

font-family: arial, serif;
font-size:12px;
color:#848484;
}

When i add text padding, like below:

padding: 0 10px 0 10px;

my image blows out (increases and starts to repeat).

Does anyone have a solution to this?

2

yes that worked a treat! thank you very much Ralph :slight_smile:

3

Try re-organizing your CSS like this:

.property_workshops {
  position:absolute; 
  background-color:#fff; 
  top:650px; 
  left:0px; 
  width:500px; 
  height:500px; 
  padding:0px; 
  z-index:2; font-family: 'PT Sans', arial, serif; 
  font-size:15px; 
  color:#848484; 
}
#icon1 {
  display: block; 
  width:480px; 
  height:500px; 
  text-indent:20px; 
  line-height:22px; 
  background:url(images/property_workshops.gif) no-repeat 0 0;
  padding: 0 10px 0 10px;
}
#icon1:hover {
  background-position: 0 -500px;
}
#icon1 span {
  display: none;
}
4

I took off 20 from the width of my image and still it didn’t work. It might be because of my CSS rollover i’ve applied?

My image is 500px x 500px

This is my HTML:

<div class="property_workshops">
<a id="icon1" href="index.html" style="color:#848484; text-decoration: none;" title="Free Investment Workshops">
Welcome to .....</a> 
</div>

My CSS:

.property_workshops {
position:absolute; background-color:#fff; top:650px; left:0px; width:480px; height:500px; padding:0px; z-index:2; font-family: 'PT Sans', arial, serif; font-size:15px; color:#848484; text-indent:20px; line-height:22px; padding: 0 10px 0 10px; 
}
#icon1
{
display: block; width:460px; height:500px; background-image:url(images/property_workshops.gif); no-repeat 0 0;
}
#icon1:hover
{ 
  background-position: 0 -500px;
}
#icon1 span
{
  display: none;
}
5

What is the .image class being applied to? It would be best to post your HTML too.

Left and right padding is added to the overall width of an element, so to avoid the blowout, reduce the width of the container by 20px (to account for the padding). E.g.

.image {
position:absolute;
background-color:#fff;
[COLOR="Red"]width:480px;[/COLOR]
height:500px;
background-image:url(images/sample.gif);
font-family: arial, serif;
font-size:12px;
color:#848484;
}