Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you also want to set <strong><em>background position</em></strong> for your image, than you can use this:</p> <pre class="lang-css prettyprint-override"><code>background-color: #444; // fallback background: url('PATH-TO-IMG') center center no-repeat; // fallback background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 </code></pre> <p>or you can also create a LESS mixin (bootstrap style):</p> <pre class="lang-css prettyprint-override"><code>#gradient { .vertical-with-image(@startColor: #555, @endColor: #333, @image) { background-color: mix(@startColor, @endColor, 60%); // fallback background-image: @image; // fallback background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 } } </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.
    3. 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