Cut a hole in a door? [duplicate]

Question

I have a <div> which has a background image of wood repeating.

I now want to cut a hole in this for a window. Is there any way to do this in HTML and CSS? Javascript welcome.

See this example on jsFiddle

Answer 1

It's simple - draw the door using paths in the <svg> element.

<svg  xmlns="http://www.w3.org/2000/svg" id="svg-door">
    <defs>
         <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
             <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768" />
        </pattern>
    </defs>
    <path xmlns="http://www.w3.org/2000/svg" d="
        M0,0 225,0 225,300 0,300 z
        M165,10, 215,10 215,80 165,80 z
    " fill="url(#wood)" fill-rule="evenodd"/>
</svg>

The CSS:

#svg-door {
   background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
    background-size: cover;
    box-sizing: border-box;
    padding: 100px;
    width: 100%;
    height: 500px;
}

The advantage of this method is that your background can be anything, and the window is a genuine window (see-through).

I have precalculated the paths for you, and you can find the new door in the fork that I have created from your fiddle - http://jsfiddle.net/teddyrised/qS4G7/

[Edit] For completeness sake, I have also used a wooden texture as the background image for the svg path.