Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Working DEMO here <a href="http://jsfiddle.net/yeyene/akRHX/" rel="nofollow noreferrer">http://jsfiddle.net/yeyene/akRHX/</a></p> <p>And its iPhone screenshot...</p> <p><img src="https://i.stack.imgur.com/59mKP.jpg" alt="enter image description here"></p> <p>add your css class to the element.</p> <h1>HTML</h1> <pre><code>&lt;div data-role="page"&gt; &lt;div data-role="header"&gt; &lt;h1&gt;Page Title&lt;/h1&gt; &lt;/div&gt;&lt;!-- /header --&gt; &lt;div data-role="content"&gt; &lt;div class="ui-grid-a"&gt; &lt;div class="ui-block-a"&gt;&lt;div class="ui-bar gradient" style="height:200px"&gt;Block A&lt;/div&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;div class="ui-bar gradient" style="height:200px"&gt;Block B&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- /grid-a --&gt; &lt;/div&gt;&lt;!-- /content --&gt; &lt;/div&gt;&lt;!-- /page --&gt; </code></pre> <h1>CSS</h1> <pre><code>.gradient { /* Legacy browsers */ background: #FF7701 url("gradient-bg.png") repeat-x top; -o-background-size: 100% 100%; -moz-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size: 100% 100%; /* Internet Explorer */ *background: #FF7701; background: #FF7701\0/; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="gradient-bg.png", sizingMethod="scale"); } @media all and (min-width: 0px) { .gradient { /* Opera */ background: #FF7701 url("gradient-bg.svg"); /* Recent browsers */ background-image: -webkit-gradient( linear, left top, left bottom, from(#FFAD26), to(#FF7701), color-stop(0.5, #FEA026), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FFFFFF), color-stop(0.5, #FF8B00) ); background-image: -webkit-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -moz-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: -o-linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); background-image: linear-gradient( top, #FFAD26, #FEA026 50%, #FFFFFF 50%, #FFFFFF 50%, #FFFFFF 50%, #FF8B00 50%, #FF7701 ); } } </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. 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.
    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