/    Sign up×
Community /Pin to ProfileBookmark

Image in <H1>

Copy linkTweet thisAlerts:
Oct 10.2009

I want to include the same image every time I put an <H1> on my pages. The image would be on the left of the text. How is it possible to do so?

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesOct 10.2009 — Set the H1 height to that of the image, set the image as the background positioned to the left and not repeated and then give the H1 a left-padding equal to the width of the image.
Copy linkTweet thisAlerts:
@hitmanauthorOct 10.2009 — Thank you Charles, that worked. However, the is stuck at the top of the height and I'm not sure how to make it display in the middle.

This is what I've tried:

[CODE]h1 {
background: url('images/icon.png') no-repeat;
background-position: left;
height: 80px;
padding-left: 84px;
vertical-align: middle; }[/CODE]

Any idea how to make the text vertically align in the middle?
Copy linkTweet thisAlerts:
@brandon_cordellOct 11.2009 — Thank you Charles, that worked. However, the is stuck at the top of the height and I'm not sure how to make it display in the middle.

This is what I've tried:

[CODE]h1 {
background: url('images/icon.png') no-repeat;
background-position: left;
height: 80px;
padding-left: 84px;
vertical-align: middle; }[/CODE]

Any idea how to make the text vertically align in the middle?[/QUOTE]

Set the line-height to equal the height of the h1.
×

Success!

Help @hitman 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 6.16,
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: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

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