Question

For my personal website I would like to feature a very specific background image. This background image represents my signature line and I was wondering what the best approach would be to have this work seamlessly throughout all major resolutions.

I’ve added this background image but in it’s current state the right side gets cut off once I resize to a smaller width. Is there any way to have this preserved?

Some demonstrations:

i49.tinypic.com/16l0kma.jpg
i45.tinypic.com/35naf6v.jpg
i46.tinypic.com/2b1tus.jpg

I have prepared a quick screenshot of my background image : http://i48.tinypic.com/2uz8aw7.jpg

Thank you very much, Nicky

Answer 1

You can use background-size:cover. Write like this:

body{
    background: url(http://i48.tinypic.com/2uz8aw7.jpg) 20px 0 no-repeat;
    background-size:cover;
}

Check this http://jsfiddle.net/dXQNJ/