I have an area where I am tyring to use a background image for an icon and then padding in some text as well.

Here is the style I am using from my style sheet:

.leave-comment {
	background: url(images/leave-comment.gif) no-repeat center left; 
	height:38px;
	padding-left:50px;	
	padding-top:10px;
}

and the code from the page:

<div class="leave-comment">
      <a href="/aceconstruction/recommendation">Leave a Comment</a>
</div>

Here is the result:

Only local images are allowed.

I have the position of the image and text done correctly, but the background image is being repeated under the text - what can I do to correct it?

Comments

Magnity’s picture

Can't see the problem in the linked page. Which image is being repeated?

Magnity

http://webdesign.magnity.co.uk
Magnity Webdesign is currently looking to recruit developers for a number of client projects.

dadofgage’s picture

Sorry, on my second post is a link to the image ---

What I am trying to do is to have the image show on the left and then pad the text over but not have the image show underneath the text 'Leave a Comment'.

Well what I ended up doing was this:

.leave-comment {
	background: url(images/leave-comment.gif) no-repeat center left;
	/*background-image:url(images/leave-comment.gif);
	background-repeat:no-repeat;
	background-position:left;*/
	height:38px;
	padding-top:10px;
}

.leave-comment a {
	padding-left:50px;	
}

Probably not the best solution, but it works.

WorldFallz’s picture

Try this ( i think leaving out the background-attachment setting might be throwing it off):

.leave-comment {
background: url(images/leave-comment.gif) no-repeat scroll center left;
height:38px;
padding-top:10px;
}

===
"Give a man a fish and you feed him for a day.
Teach a man to fish and you feed him for a lifetime."
-- Lao Tzu
"God helps those who help themselves." -- Benjamin Franklin
"Search is your best friend." -- Worldfallz