/    Sign up×
Community /Pin to ProfileBookmark

background bullet getting cropped

Copy linkTweet thisAlerts:
Sep 04.2008

Hi all,

Trying in vain to figure this one out.

I’ve got a background image for this <h2> that i’m trying to use as a bullet. I can position it where I want it, but it looks like it’s getting cropped based on the size of the adjacent text.

[URL=”http://www.randyjharvey.com/test2.html”]here’s the link…[/URL] I’m viewing this with FF3 Mac

I’ve tried giving the <h2> a specific height, and I’ve tried adjusting the line-height and padding, but nothing seems to help. I’m not against achieving this goal another way, but for me, this is the easiest way to get the image in the position I want it relative to the text.

Thanks for your help!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@LeeUSep 04.2008 — Well, in FF 2 - on Linux it lloks good. I have attached a screen capture.

[upl-file uuid=34b4b119-b5c7-4cb5-b23c-08f0f413b467 size=4kB]wd092008.gif[/upl-file]
Copy linkTweet thisAlerts:
@JPDauthorSep 04.2008 — thanks, but that's not how it's really supposed to look. The image is actually about 20px taller. I've attached a screenshot of how it's supposed to look...

[upl-file uuid=7b7763dd-9643-4b94-a234-9c1c95c921a4 size=48kB]Picture 6.png[/upl-file]
Copy linkTweet thisAlerts:
@CSSNINJASep 04.2008 — Try this:

[CODE]

h2.coaching {
font-weight:normal;
font-size:22px;
font-family:Georgia,"times new roman",serif;
color:#44291f;
padding-left:50px;
padding-bottom:2px;
border-bottom:1px solid #44291f;
[COLOR="Red"]background:url(img/bullett-coaching.jpg) top left no-repeat;
line-height: 37px;[/COLOR]
}

[/CODE]
Copy linkTweet thisAlerts:
@JPDauthorSep 04.2008 — nice. I'd tried that, but it must not work in conjunction with "Background-Position: 0 -10px".

That takes care of it when working with a single line of text, but when the text wraps around to a second line... then what?

Thanks for the help.
Copy linkTweet thisAlerts:
@CSSNINJASep 04.2008 — Depends on where you want it.

If you want it center between the two(or more) lines of text:

[CODE]

background:url(img/bullett-coaching.jpg) center left no-repeat;

[/CODE]

If you want it always on the bottom line of text:

[CODE]

background:url(img/bullett-coaching.jpg) bottom left no-repeat;

[/CODE]
×

Success!

Help @JPD 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.28,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

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