Fandom

HTML & CSS Wiki

-moz-element

649pages on
this wiki
Add New Page
Comments0 Share

The CSS -moz-element Mozilla extension property value was introduced in Gecko 2.0 (Firefox 4.0) as a Mozilla extension value for the background-image property. It is used in order to use an arbitrary HTML element as a background image for background and background-image. A particularly useful scenario for using this would be to render an image in an HTML5 <canvas>, then use that as a background.

Values

Value Description
id Uses the name of the id attribute of an element as the background image. Must start with a hash (#), just like an id selector.


CSS examples:

This example uses a hidden <div> as the background. The background element uses a gradient, and the text will also be part of the background.

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">  
    <p>This box uses the element with the #myBackground1 ID as its background!</p>  
</div>  
 
<div style="overflow:hidden; height:0;">  
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: -moz-linear-gradient(left, red, orange, yellow, white);">  
  <p style="-moz-transform-origin:0 0; -moz-transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>  
  </div>  
</div>

That will produce:

-moz-element Example1


This example uses a hidden <button> element in a repeating pattern as its background. This demonstrates that you can use arbitrary elements as background, but doesn't necessarily demonstrate good design practices.

<div style="width:400px; height:100px; background:-moz-element(#myBackground2);"></div>
 
  <div style="overflow:hidden; height:0;">
    <button id="myBackground2" type="button">Evil button!</button>
  </div>

That will produce:

-moz-element Example2

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.