/    Sign up×
Community /Pin to ProfileBookmark

Right aligning text with a background image

Copy linkTweet thisAlerts:
Jul 12.2006

h1 { line-height:35px;
font-size:18px;
font-weight: bold;
text-align: right;
background-image:url(images/heading1.jpg);
background-repeat: repeat-y;
height:35px;
width:568px;
margin:20px 0 20px 0;
border:0px;
}

[URL=http://www.sitestepper.com/images/h1.png]http://www.sitestepper.com/images/h1.png[/URL]

Please look at the image above …

I like to give my header 1’s a background image.
I like to have the text right aligned.
However, I would like to have a couple of pixels between the rightmost character of the text and the border.
I cannot use padding or margin because that shifts the background image too.

Is this possible (without extra DIV-elements that is), just <h1>some text</h1> ?

Thanks in advance for any advice …
Erik

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisJul 12.2006 — Have you tried "text-indent"?
Copy linkTweet thisAlerts:
@webrikauthorJul 12.2006 — "text-indent" is for indenting text to the left, I want it 'indented" to the right
Copy linkTweet thisAlerts:
@ray326Jul 12.2006 — That would be padding.
Copy linkTweet thisAlerts:
@webrikauthorJul 12.2006 — No, that doens't work (at least not in Internet Explorer - should try the other two), because padding shifts the background image too .

Update: just tried in Opera and Firefox too. Same result, the background gets padded too. :o
Copy linkTweet thisAlerts:
@wamboidJul 12.2006 — How about putting a wrapper div around it with the background there, then put padding on the h1.
Copy linkTweet thisAlerts:
@SiddanJul 12.2006 — difficult to do that I think. Easiest would be adding an empty space after the text if you do not wish to wrap the header
Copy linkTweet thisAlerts:
@gil_davisJul 12.2006 — Yes, Siddan! Add "&nbsp;" after the text.
Copy linkTweet thisAlerts:
@ray326Jul 12.2006 — I don't think the background "gets padded". I think the padding expands the box on real web browsers and you're not taking that into account.
Copy linkTweet thisAlerts:
@webrikauthorJul 13.2006 — How about putting a wrapper div around it with the background there, then put padding on the h1.[/QUOTE]

difficult to do that I think. Easiest would be adding an empty space after the text if you do not wish to wrap the header[/QUOTE]


Yes, I know about that one (I can even put a <span> inside the <h1> with a padding of some pixels, and that will work too.

But the idea was to be able to just ust <h1>..</h1> without having to put &nbsp; or <span> or extra <div>.

I don't think the background "gets padded". I think the padding expands the box on real web browsers and you're not taking that into account.[/QUOTE]

The background GETS padded on all three browsers I tried (on WindowsXP, IE 6.0, Opera 8.52 and Firefox 1.5.0.4.
Copy linkTweet thisAlerts:
@ray326Jul 13.2006 — The background GETS padded on all three browsers I tried [/QUOTE]What's the width of your background image? Dollars to doughnuts it's about 568px. Backgrounds expand to the inside of the border and they are unaffected by padding. Don't believe me? Put a padding:20px; in that h1 style and see where the background goes.
Copy linkTweet thisAlerts:
@webrikauthorJul 13.2006 — What's the width of your background image? Dollars to doughnuts it's about 568px. Backgrounds expand to the inside of the border and they are unaffected by padding. Don't believe me? Put a padding:20px; in that h1 style and see where the background goes.[/QUOTE]

I don't know the saying, but if you lived neary I would bring you a doughnut ? .

You were right, the image is 568px and it does fill the box ! The whole idea is to have some fading background image around my header 1's.

I do have the book you mention in your signature at hand (bought it a couple of months back when you first helped me with a problem), and now that I knew that, went in search for some positional element.

h1 { line-height:35px;

font-size:16px;

font-weight: bold;

text-align: right;

background-image:url(«#ImageRoot»/heading1.jpg);

background-repeat: repeat-y;

[B]background-position: center right;[/B]

height:35px;

width:568px;

margin:20px 0 20px 0;

border:0px;

padding-right:5px;

}

Problem solved by putting background-position: center right; in place.

Never knew it existed until now :rolleyes: .

Thanks for all the help ... it is really appreciated.
×

Success!

Help @webrik spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...