Cut a hole in a door?

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

Instead of "cutting a hole" in the div, depending on your needs you can put the background into the window above the door div. — gpasci, Feb 26 '13 at 15:17
Thanks for your comments, I could use a background image to simulate a transparency, I cannot use canvas as the door is 3D and moves around — CR41G14, Feb 26 '13 at 15:19

Terry · Accepted Answer · 2013-02-26T18:32:32.053

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.

This looks really good! How do you calculate the paths? Can the paths be dynamically created if I were to re-position the window? — CR41G14, Feb 26 '13 at 17:17
Simple mathematics :) The outer rectangle has the following paths (in x,y coordinates) - 0,0 -> 225,0 -> 225,300 -> 0,300. The inner rectangle has the following paths (calculated from your specifications in the original fiddle) - 165,10 -> 215,10 -> 215,80 -> 165,80. I have added the 100px padding just to move the svg element from the border, so you can better visualize the real "transparentness" of the window. — Terry, Feb 26 '13 at 17:31

score 2 · Answer 2 · answered Feb 26 '13 at 15:19

2

You mean like this? http://jsfiddle.net/UWyvz/3/

I basically used some wood and created a window pane.

Nah, I replicated the window, but called it windowpane, then set the window pane's z-index to be lower than that of the window's and set the background-color of windowpane to white.

answered Feb 26 '13 at 15:19

Mathew Thompson

55,877
15
127
148

Thanks for the answer but I would need a more realistic looking at the moment the example still doesn't look transparent – CR41G14 Feb 26 '13 at 15:24
Just lower the opacity of the `window` class? Like this: http://jsfiddle.net/UWyvz/6/ – Mathew Thompson Feb 26 '13 at 15:26
@mattytommo - the window is not double glazed and left wide open to burglars. Best get batman on this! – Darren Feb 26 '13 at 16:17
@DarrenDavies Hahaha you're right, you need a DC superhero. How about Green Lantern? :D – Mathew Thompson Feb 26 '13 at 16:20
@mattytommo - superman all the way ;) – Darren Feb 26 '13 at 16:20
@DarrenDavies We already have a superman, that's Paul aka SuperFlem! – Mathew Thompson Feb 26 '13 at 16:21
@CR41G14 Out of interest, why did you mark me as the answer and then un-mark it? :) – Mathew Thompson Feb 27 '13 at 11:20

MarcoK · Answer 3 · 2013-02-26T15:36:16.487

2

Might be a bit of an "ugly fix", but it works: using the border-property to simulate a door (the element is actually the window).

HTML

<div class="door"></div>

CSS

body {
    background-image:url("http://wallpapers.free-review.net/wallpapers/42/Sun_in_white_cloud.jpg");
}
.door {
    height:70px;
    width:50px;
    background-color:rgba(0, 0, 255, 0.4);
    border-left: 175px solid orange;
    border-top: 10px solid orange;
    border-right: 10px solid orange;
    border-bottom: 230px solid orange;
    border-image:url("http://roundsquarewoodworking.com/wp-content/uploads/2010/07/wood-texture-background.jpg") 25% repeat;
}

JSFiddle.

EDIT

Updated the code to see the "see-through" effect. The borders aren't perfect, but I hope you get the idea.

edited Feb 26 '13 at 15:36

answered Feb 26 '13 at 15:26

MarcoK

6,090
2
28
40

Thanks for the suggestion, this is an alternative as it does mimic the cut out better than the other suggestions – CR41G14 Feb 26 '13 at 15:40
This is a rather ingenious solution - never thought of it, heh. – Terry Feb 27 '13 at 09:45

score 0 · Answer 4 · answered Feb 26 '13 at 15:16

0

I recommend use canvas html5. http://www.html5canvastutorials.com

answered Feb 26 '13 at 15:16

Maetschl

1,330
14
23

Do you have any examples of how this can be achieved using canvas? As my door is not static I am unsure if this can be an option – CR41G14 Feb 26 '13 at 15:25

Cut a hole in a door?

4 Answers4