Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Multiple backgrounds!</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>body { background: #eb01a5; background-image: url("IMAGE_URL"); /* fallback */ background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */ }</code></pre> </div> </div> </p> <p>These 2 lines are the fallback for any browser that doesn't do gradients. See notes for stacking images only IE &lt; 9 below.</p> <ul> <li>Line 1 sets a flat background color.</li> <li>Line 2 sets the background image fallback.</li> </ul> <p>The final line sets a background image and gradient for browsers that can handle them.</p> <ul> <li>Line 3 is for all relatively modern browsers.</li> </ul> <p>Nearly all current browsers have support for multiple background images and css backgrounds. See <a href="http://caniuse.com/#feat=css-gradients" rel="noreferrer">http://caniuse.com/#feat=css-gradients</a> for browser support. For a good post on why you don't need multiple browser prefixes, see <a href="http://codepen.io/thebabydino/full/pjxVWp/" rel="noreferrer">http://codepen.io/thebabydino/full/pjxVWp/</a></p> <p><strong>Layer Stack</strong></p> <p>It should be noted that the first defined image will be topmost in the stack. In this case, the image is on TOP of the gradient.</p> <p>For more information about background layering see <a href="http://www.w3.org/TR/css3-background/#layering" rel="noreferrer">http://www.w3.org/TR/css3-background/#layering</a>.</p> <p><strong>Stacking images ONLY (no gradients in the declaration) For IE &lt; 9</strong></p> <p>IE9 and up can stack images this same way. You could use this to create a gradient image for ie9, though personally, I wouldn't. However to be noted when using only images, ie &lt; 9 will ignore the fallback statement and not show any image. This does not happen when a gradient is included. To use a single fallback image in this case I suggest using Paul Irish's wonderful <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/" rel="noreferrer">Conditional HTML element</a> along with your fallback code:</p> <pre class="lang-css prettyprint-override"><code>.lte9 #target{ background-image: url("IMAGE_URL"); } </code></pre> <p><strong>Background position, sizing etc.</strong></p> <p>Other properties that would apply to a single image may also be comma separated. If only 1 value is supplied, that will be applied to all stacked images including the gradient. <code>background-size: 40px;</code> will constrain both the image and the gradient to 40px height and width. However using <code>background-size: 40px, cover;</code> will make the image 40px and the gradient will cover the element. To only apply a setting to one image, set the default for the other: <code>background-position: 50%, 0 0;</code> or for <a href="http://caniuse.com/#feat=css-initial-value" rel="noreferrer">browsers that support it</a> use <code>initial</code>: <code>background-position: 50%, initial;</code></p> <p>You may also use the background shorthand, however this removes the fallback color and image.</p> <pre class="lang-css prettyprint-override"><code>body{ background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531); } </code></pre> <p>The same applies to background-position, background-repeat, etc. </p>
    singulars
    1. This table or related slice is empty.
    1. POHow do I combine a background-image and CSS3 gradient on the same element?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USGidgidonihah
    1. USGidgidonihah
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow do I combine a background-image and CSS3 gradient on the same element?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks for your answer, any ideas of how to then control the `background-position` just for the image and not the gradient?
      singulars
      1. PO
      1. USadardesign
    2. COthanks for this, excellent information. | @adardesign: use the background shorthand. Modifying the above example, it would be: background: url(IMAGE_URL) no-repeat left top, [appropriate-gradient];
      singulars
      1. PO
      1. USRussellUresti
    3. COHmm, this doesn't work in IE for me. If I remove the 3rd & 4th lines, then I get the fallbacks as expected, but no gradients in Firefox etc. Add them back in and Firefox is fine, but IE (6,7,8) shows nothing.
      singulars
      1. PO
      1. USrichsage
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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