Single bar img

[medavidcook]

Hey

I am trying to do something like in the template

http://psdstyle.net/2011/04/04/perpetual-redux-free-psd-website-layout/

if you look under the header there is a multi colour line, i have designed mine i got it at 150×20 its made up of 3 colours i am struggling implementing this into css.

Anyone have any ideas.

thanks

[Paulie_D]

Use a repeating background image….simples.

[medavidcook]

basically i had my css like this
.hr {background: *image* repeat; width: 100%; }

but when i do that it puts the image at like 200%

any ideas.

[Andy Howells]

Please create a [codepen](http://codepen.io/pen)

[medavidcook]

ok i will do it when i get home, as not got access to the img file atm.

[Paulie_D]

If it’s at the bottom of your header you can just do something like this: http://codepen.io/Paulie-D/pen/ajCqz

[medavidcook]

Hi Paulie_D

Thats exactly what i was looking for however between the img and the header, i would like a little white border, so dont think this will work.

[wolfcry911]

just add a white border to the top of the image, or add the border with a pseudo element

[Paulie_D]

>just add a white border to the top of the image

This…simples.

[Author]

Posts