image repeated before and after?

[craignewman78]

I want an image to repeat-x either side of my H1 titles. My image is a transparent png (just a simple yellow dot).

Can this be done?

Note: Some of my H1’s are placed over background images, not always on a solid colour.

Here’s a screenshot of what I’m looking to do http://i.stack.imgur.com/0Ug64.png

[Paulie_D]

http://stackoverflow.com/questions/23584120/line-before-and-after-centered-text-over-transparent-background

[craignewman78]

This almost works! Although if I change:

border-bottom: 1px solid #000;

to

border-bottom: 1px dotted #000;

and increase the size to 6px I get a square! lol

[craignewman78]

See here Paulie…

http://jsfiddle.net/craignewman78/2y3x15fu/

[Paulie_D]

Dotted borders are, I understand, implemented differently in each browser. Some use squares, some use circles.

Chromes uses squares (as does Safari 5…I can’t test higher on Windoze), FF & IE circles (although IE has issues with starting with full circles).

CSS is fun…innit!?

[craignewman78]

Sometimes! ha

Is there an answer to this using a repeating background png maybe?

My clients are insisting on this design! … Pain in the … ;)

[Paulie_D]

Is there an answer to this using a repeating background png maybe?

Probably the way to go in this instance.

[Author]

Posts