1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: '-moz-image-rect'
slug: Web/CSS/-moz-image-rect
translation_of: Web/CSS/-moz-image-rect
---
<div>{{CSSRef}}{{Non-standard_Header}}</div>
<h2 id="Summary">Summary</h2>
<p>The <strong><code>-moz-image-rect</code></strong> value for <a href="/en-US/docs/Web/CSS">CSS</a> {{CSSxRef("background-image")}} lets you use a portion of a larger image as a background. This allows you to, for example, use different parts of one larger image as backgrounds in different parts of your content.</p>
<p>This works very similarly to the {{CSSxRef("-moz-image-region")}} property, which is used with the {{CSSxRef("list-style-image")}} property to use parts of an image as the bullets in lists. However, this can be used for any CSS background.</p>
<p>The syntax for the rectangle is similar to the <a href="/en-US/docs/Web/CSS/shape#Syntax"><code>rect()</code></a> function generating a {{CSSxRef("<shape>")}} CSS type. All four values are relative to the upper left corner of the image.</p>
<h2 id="Syntax">Syntax</h2>
<pre class="syntaxbox">-moz-image-rect({{CSSxRef("<uri>")}}, <em>top</em>, <em>right</em>, <em>bottom</em>, <em>left</em>);</pre>
<h3 id="Values">Values</h3>
<dl>
<dt>{{CSSxRef("<url>")}}</dt>
<dd>The URI of the image from which to take the sub-image.</dd>
<dt><code>top</code></dt>
<dd>The top edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.</dd>
<dt><code>right</code></dt>
<dd>The right edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.</dd>
<dt><code>bottom</code></dt>
<dd>The bottom edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.</dd>
<dt><code>left</code></dt>
<dd>The left edge, specified as an {{CSSxRef("<integer>")}} or {{CSSxRef("<percentage>")}}, of the sub-image within the specified image.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{CSSSyntax}}
<h2 id="Example">Example</h2>
<p>This example loads an image and uses it in four segments to draw the Firefox logo in four {{HTMLElement("div")}} blocks. Clicking on their container causes the four segments to rotate around by swapping the {{CSSxRef("background-image")}} property values among the four {{HTMLElement("div")}} blocks.</p>
<h3 id="CSS">CSS</h3>
<p>The CSS defines one container style, then the styles for the four boxes that comprise the complete image.</p>
<p>The container looks like this:</p>
<pre class="brush: css">#container {
width:267px;
height:272px;
top:100px;
left:100px;
position:absolute;
font-size:16px;
text-shadow:white 0px 0px 6px;
text-align:center;
}</pre>
<p>Then the four boxes defining the segments of the image are defined. Let's look at them one at a time.</p>
<pre class="brush: css">#box1 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
width:133px;
height:136px;
position:absolute;
}
</pre>
<p>This is the top-left corner of the image. It defines a rectangle containing the top-left quarter of the image in the file <code>firefox.jpg</code>.</p>
<pre class="brush: css">#box2 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
width:133px;
height:136px;
position:absolute;
}
</pre>
<p>This defines the top-right corner of the image.</p>
<p>The other corners follow a similar pattern:</p>
<pre class="brush: css">#box3 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
width:133px;
height:136px;
position:absolute;
}
#box4 {
background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
width:133px;
height:136px;
position:absolute;
}
</pre>
<h3 id="HTML">HTML</h3>
<p>The HTML is quite simple:</p>
<pre class="brush: html"><div id="container" onclick="rotate()">
<div id="box1" style="left:0px;top:0px;">Top left</div>
<div id="box2" style="left:133px;top:0px;">Top right</div>
<div id="box3" style="left:0px;top:136px;">Bottom left</div>
<div id="box4" style="left:133px;top:136px;">Bottom right</div>
</div>
</pre>
<p>This places the four segments of our image in a two-by-two box grid. These four segments are all contained within a larger {{HTMLElement("div")}} block whose primary purpose is to receive click events and dispatch them to our JavaScript code.</p>
<h3 id="The_JavaScript_code">The JavaScript code</h3>
<p>This code handles the click event when the container receives a mouse click.</p>
<pre class="brush:js">function rotate() {
var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
// Now that we've saved the last one, start rotating
for (var i=1; i<=4; i++) {
var curId = "box" + i;
// Shift the background images
var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
document.getElementById(curId).style.backgroundImage = prevStyle;
prevStyle = curStyle;
}
}</pre>
<p>This uses {{DOMxRef("window.getComputedStyle()")}} to fetch the style of each element, shifting it to the following element. Notice that before it begins doing so it saves a copy of the last box's style since it will be overwritten by the third element's style. By simply copying the values of the {{CSSxRef("background-image")}} property from one element to the next with each mouse click, we achieve the desired effect.</p>
<h3 id="What_it_looks_like">What it looks like</h3>
<p>{{EmbedLiveSample("Example","400","400")}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.types.-moz-image-rect")}}</p>
|
