Custom cut-out like background in HTML5 and CSS

Question

I am working on a project and I will try to explain my problem as below:

So I am making a web page where i will have different shapes lets say a shape of a soccer ball an television or something like that. Next i have three buttons to choose the color of the particular shape. After that the last thing is to upload a photo and place the photo on the shope eg uploading a photo on at shirt.

As i am kind of a beginner so i would like to know what concept of HTML should i use to get a with a background of a cut out of lets say T-Shirt. My idea was to use a background photo with a tee shirt but in that case when i change the color it will change the color it will replace the background photo with simply that color.

I'm not sure i I can explain the problem in any other way.

Thank You

Answer 1

Your best guess would be to have multiple t-shirts with differents colours in a sprite (google CSS sprites) and then change the background-position depending on the user's choice.

CSS sprites work like this: you put all your images in a single image, but make sure that the container is small enough for only one of the images. You can then, with background-position, decide which part has to be visible.

StackOverflow also uses sprites: http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=3c6263c3453b

Answer 2

You can use SVG clip-path= attribute to clip an SVG <image> to arbitrary shapes:

<div id="bg">
    <svg xmlns="http://www.w3.org/2000/svg" 
         xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <clipPath id="my-clip-path-shape">
                <path d="... path data ..."/>
            </clipPath>
        </defs>
        <image xlink:href="http://i.stack.imgur.com/tINBm.jpg"
               clip-path="url(#my-clip-path-shape)" />
    </svg>
</div>

Note that SVG is part of HTML 5, so you can embed SVG directly into an HTML5 document or alternatively you can link to an external SVG file with <img> or <object> / <embed> tags.

To make creating paths easier, you can use SVG editors like Inkscape. In Inkscape, you can create clip path by selecting the image you want to clip and the path then Object > Clip > Set .

View example in JSFiddle

It is also possible to reuse an SVG path from a different SVG document or from a different tag embedded in the same HTML document, which may reduce the download size and memory usage if you reuse a path a lot, however this is not very well supported in many browsers.

Since embedded SVG is just an element in HTML5 DOM, you can manipulate it with Javascript just like any other HTML5 elements. You can, for example, modify the URL that the <image> is pointing to, or change the shape of the path, or swap between different paths, or move the image around in the path.

Imags are public domain image from: 1 2