Question about text on background images

Hi,

I was just wondering if someone could shed some light on background images with text on them. I noticed when trying to add a padding to text within background images, it adds width to the images and the image jumps around. I know some workarounds for it like... no-repeat on the image, and putting divs within divs. But I was just wondering what you guys had for feedback on this and what would be the correct procedure.

 

margins? Have yo tried margins instead of padding?

 

can u post some code?

 

If you are setting a background image to an element with a fixed with and want your text placement to be in a specific area, you can do 2 things easily...

1 - Use the padding XXpx count and subtract the padding amount from the overall width of the element. For example if it's a <p> and you apply padding: 0px 20px 0px 20px; to it and the overall width of the <p> is 200, you need to set the width: 160px;

160 + 20 + 20 = 200

2 - Place the text in an element within an element... <div><p></p></div> - Setting <div> to fixed width and using margin spacing on your <p> appropriately.

 

Thank you guys! And "workingsmart", your summary is what I am looking for. I guess tha'ts pretty much what I've been having to do all along but I just thought it was an odd way of doing things, but now I know it is correct Thank you!!!!!!

 

If divs within divs work then why would you like to experiment? The thing works like a charm. Used it to solve a large number of my problems. And you don't have to worry about things get out of control due to this.

 

have your tried absolute positioning tag? it works perfectly for me. else, you can try indexing them for position.

 

I hope that you got your answer and thanks it will also help others to learn something.