Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>CSS3 Multiple Backgrounds for Internet Explorer and legacy Mozilla Firefox</strong></p> <p>This library brings support for multiple background images to Internet Explorer 6-8 and Firefox &lt;=3.5 by reading the CSS code from style and link tags.</p> <p>CSS3 browser support extends to background-image, background-position, background-repeat. This library only implements its own property for the shorthand style background property.</p> <p><strong><a href="http://plugins.jquery.com/project/multiple-bg" rel="noreferrer">http://plugins.jquery.com/project/multiple-bg</a></strong></p> <p><img src="https://i.stack.imgur.com/ilA2q.png" alt="enter image description here"></p> <p><strong>Example Usage</strong></p> <p><em>Including the Script</em></p> <p>All that needs to be included is the jQuery library and this script for these features to work. No extra Javascript coding is required. The minified library is only 8.7kB!</p> <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery.multiple-bgs.js"&gt;&lt;/script&gt; </code></pre> <p><em>Writing the CSS</em></p> <p>Multiple backgrounds using the background property are read using this Javascript library. Notice how hover and active states are supported.</p> <pre><code>#ex1 { background: url(middle.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left.gif) no-repeat 0 0, /* For CSS3 Browsers */ url(right.gif) no-repeat 100% 0, url(middle.gif) repeat-x 0 0; } #ex1:hover { background: url(middle-hover.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left-hover.gif) no-repeat 0 0, /* For CSS3 Browsers */ url(right-hover.gif) no-repeat 100% 0, url(middle-hover.gif) repeat-x 0 0; } #ex1:active { background: url(middle-active.gif) repeat-x 0 0; /* For unsupported browsers */ background: url(left-active.gif) no-repeat 0 0, /* For CSS3 Browsers */ url(right-active.gif) no-repeat 100% 0, url(middle-active.gif) repeat-x 0 0; } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload