• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 433
  • Last Modified:

H2 element with background image, need to indent text without moving background

Here is my heading:

<h2 class="navheading"><span class="white">Health Management</span></h2>

CSS is attached. I need to move the text to the right (indent), but if I add padding, then padding is added around the background image. How can I move the text without moving the background or changing the specified width and height? Want to keep it within 192x30, with the background image, just indent the text. Thanks.
h2 {
		font-family: Trebuchet MS, Trebuchet, Helvetica, Arial, sans-serif;
		font-size: 15px;
		line-height: 17px;
		color: #153c77;
		margin: 0px;
		padding: 0px;
		font-weight: bold;
h2.navheading {
		background: #2344a5 url("http://secure.bbdesign.com/lifespanfitness2/art/gr_navheading.png") no-repeat top right;
		width: 192px;
		height: 30px;

Open in new window

Brad Bansner
Brad Bansner
  • 2
1 Solution
Have you tried putting padding-left on the span instead of the h2?  That shouldn't cause the h2 background image to move over.
Brad BansnerWeb DeveloperAuthor Commented:
Yes, that works, thanks!

I actually found that by adding padding, but reducing the width and height accordingly, that works too.
that or change the margin of the span.

h2 span{position-absolute; margin-left:10px}

Brad BansnerWeb DeveloperAuthor Commented:
What I missed is that I also needed to add some space above the text, and I wasn't able to do that with padding on a SPAN element. I guess you can only go left-to-right within a SPAN.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now