The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Single bar img

  • # February 25, 2013 at 5:41 pm


    I am trying to do something like in the template

    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.


    # 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](

    # 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

    This reply has been reported for inappropriate content.

    Meanwhile, you can use a placeholder

    # February 26, 2013 at 8:33 am

    If it’s at the bottom of your header you can just do something like this:

    # 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


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

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed