Reply
append an image after every h2
Old 04-29-2005, 05:52 AM append an image after every h2
bez
bez's Avatar
Skilled Talker

Posts: 53
(CSS newbie)

I want every <h2> text to be followed by an icon, kinda like:

Heading 2 >>

(where >> is an image). is it possible to set this using a CSS rule?

Thanks for any feedback
bez is offline
Reply With Quote
View Public Profile
 
When You Register, These Ads Go Away!
Old 04-29-2005, 07:07 AM
chrishirst's Avatar
Super Moderator

Posts: 13,671
Location: Blackpool. UK
You could use
Code:
h2 {
	position:relative;
	background-image: url(image_url);
	background-repeat: no-repeat;
	background-position: right center;
}
Not forgetting of course that as <hn> are block level tags they will be as wide as the parent container.
__________________
Chris. ->> Links are advertising NOT optimising!! <<-
Indifference will be the downfall of mankind, but who cares?
Code Samples | People Counting System
chrishirst is offline
Reply With Quote
View Public Profile Visit chrishirst's homepage!
 
Old 04-29-2005, 08:17 AM
bez
bez's Avatar
Skilled Talker

Posts: 53
cheers for that chris.

The problem like u said is that the images can appear miles after the end of the heading. 1 solution is to right-align the text and give it padding, however right aligned aligned text is not good on my site so i just put the image before the text then put in some left padding.

>> Header 2

Is it possible to indent the bg image a varibale amount, depending on the length of the text? I woul guess not.......

Last edited by bez : 04-29-2005 at 08:42 AM.
bez is offline
Reply With Quote
View Public Profile
 
Old 04-29-2005, 09:40 AM
bez
bez's Avatar
Skilled Talker

Posts: 53
OK, this little rule works a treat:

h2:after {
content: url("../i/header.jpg");
}

but not in IE, darn.

Last edited by bez : 04-29-2005 at 09:49 AM.
bez is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to append an image after every h2
 

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML

 


Page generated in 0.12841 seconds with 12 queries