Grow your CSS skills. Land your dream job.

Single bar img

  • # February 25, 2013 at 5:41 pm

    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

    # February 25, 2013 at 5:45 pm

    Use a repeating background image….simples.

    # February 26, 2013 at 7:46 am

    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.

    # February 26, 2013 at 7:54 am

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

    # February 26, 2013 at 8:02 am

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

    # February 26, 2013 at 8:08 am

    Meanwhile, you can use a [placeholder](http://placehold.it/)

    # February 26, 2013 at 8:33 am

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

    # February 26, 2013 at 8:45 am

    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.

    # February 26, 2013 at 8:57 am

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

    # February 26, 2013 at 11:18 am

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

    This…simples.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".