Grow your CSS skills. Land your dream job.

Trouble with repeating header image

  • # April 25, 2008 at 3:37 pm

    Hello,

    I am going through Chris’s first few lessons that take a PS mockup and slices it into CSS. I am having a bit of trouble getting a smooth transition from the header graphic to the repeating background image. The code is working just fine, however the repeating image is not smooth. Is there some sort of trick I need to do when exporting from PS?

    To ensure that I had an image that would match exactly, I took a sliver off the left side of the header grahpic, then repeated it. As you can see, it appears choppy.

    http://www.sandbarcontractors.com/indextest.html

    Thank you for your help!

    # April 25, 2008 at 5:39 pm

    It looks like this is a problem with layer styles in Photoshop. Before you crop down the "sliver", you should flatten your image first. That way the layer style won’t re-apply itself to the new smaller size and do weird things. You should also make sure that the area that you slice out for your sliver does not have anything that isn’t 100% horizontally repeatable.

    # April 26, 2008 at 6:55 am
    Quote:
    You should also make sure that the area that you slice out for your sliver does not have anything that isn’t 100% horizontally repeatable.

    It looks like this is the case. The sliver that you took of the left has a drop shadow that doesn’t stretch the whole way across the image, so when it is repeated, it isn’t smooth. Try taking a slice from further along the image, but still where the blue colour is correct.

    # April 26, 2008 at 7:39 am

    The right hand side of the image looks like a more viable option perhaps?
    Changing the distance to 0px on the drop shadow may sort it too.

    A good technique is to just flatten the drop shadow. Select the layer with the drop shadow then go to Layer>Layer styles>Create Layer. Photoshop creates a new layer with the drop shadow on it that you can nudge.
    You can then just go back and reapply the drop shadow if you want to change it.

    Tob :D

    # April 26, 2008 at 11:01 am

    Thanks everyone, that did it.

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

You must be logged in to reply to this topic.

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