css h1 background image

[glennk]

Is it possible to add an image background to the h1 tag using css.

 

I want to have this image behind all my h1's for christmas.

 

 

If its possible how is it done ?

 

Thanks again - Glenn

[Slap]

Background-Image

 

Background-image lets you specify a graphic file that will be used as a background for an element. This can easily look messy so this tag should be used with care if you intend having a text displayed over a busy looking image. The image might even obscure the text completely.

 

If your background image only applies to a few elements you should either include a plain background of a similar colour to be used behind the rest of the page or use the background-color property to specify a colour that is harmonious with the images used.

 

The background image can be specified as either a full URL such as http://www.mysite.com/background.gif or relative URL such as /images/background.gif.

 

H1 { background-image: /images/background.gif }

 

Lifted from http://www.practicalpc.co.uk/webbuilding/design/css4.htm

 

Spooky I'm just looking at a very similar thing....

 

Tony

[glennk]

Hi Slap that's great mate and this image looks good because its quite faint. All ready for the 1st of December now just a matter of switching the css.

 

One thing though the background image goes the full length of the page.

 

 

Is there anyway to keep it to the width of the text within the h1 ?

 

Thanks again - Glenn

[Slap]

Most likely

 

Quick fix, as your site is a 'fixed width' I suppose you could make a banner with white ends so it appears to be the right width.

 

Let me think about it, unless somebaody beats me to the answer!

[Slap]

Hmmmm

 

There must be a way other than this but I'm not an expert and I can't find it just yet

 

The background image repeats across the page since the 'no-repeat' attribute is unspecified and the text doesn't go to the edges 'cos it's centred.

 

If it were me I'd photoshop the holly and make a banner (by repeating the image) the same width of the text and then use that as the background image with the attribute background-position:center set.

 

That should solve it......

 

Or leave it as it is, 'cos I think it looks rather nice

 

Now if only I could sort out my problem

[glennk]

Or leave it as it is, 'cos I think it looks rather nice

 

 

I was just thinking that. Lokks nice and simple. I think I will leave it.

 

Thanks again - just off for a couple of hours fishing.

 

Cheers - Glenn

[wanzelbin]

I was just thinking that. Lokks nice and simple. I think I will leave it.

 

Thanks again - just off for a couple of hours fishing.

 

Cheers - Glenn

 

I agree it looks better as it is, but just to let you know how to limit it to the text, put the text within a <span> tag, and apply the background-image style to the span. I realise this won't apply to all h1 tags, but you could pop the styling into a class that is referenced by the span.

 

e.g.

 

<style>

.bgpic

{

background-image: url(http://www.anglersnet.co.uk/images/angnettop.gif)

}

</style>

 

<h1><span class="bgpic">Your Text Here</span></h1>

 

David

[Andy_1984]

background-repeat: no-repeat

 

place this under the background image in the h1 css

 

always good to know but i agree with everyone else, this looks nicer with repeat. heres some others-

 

repeat repeated vertically and horizontally

repeat-x repeated horizontally

repeat-y repeated vertically

no-repeat not repeated image shown as is

 

seeing those loverly big cod on your site is making me hungry

Edited November 29, 2006 by Andy_1984

[glennk]

Thanks to everyone for their help its much appreciated.