Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>As aditional information on <strong>@Quentin</strong> answer, and as he rightly says, <code>background</code> CSS property itself, is a shorthand for:</p> <pre><code>background-color background-image background-repeat background-attachment background-position </code></pre> <p>That's mean, you can group all styles in one, like:</p> <pre><code>background: red url(../img.jpg) 0 0 no-repeat fixed; </code></pre> <p>This would be (in this example):</p> <pre><code>background-color: red; background-image: url(../img.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: 0 0; </code></pre> <p>So... when you set: <code>background:none;</code><br> <strike>you are saying that all the background properties are set to <strong>none</strong>...</strike><br> You are saying that <code>background-image: none;</code> and all the others to the <code>initial</code> state (as they are not being declared).<br> So, <code>background:none;</code> is: </p> <pre><code>background-color: initial; background-image: none; background-repeat: initial; background-attachment: initial; background-position: initial; </code></pre> <p>Now, when you define only the color (in your case <code>transparent</code>) then you are basically saying:</p> <pre><code>background-color: transparent; background-image: initial; background-repeat: initial; background-attachment: initial; background-position: initial; </code></pre> <p>I repeat, <em>as @Quentin rightly says</em> the <code>default</code> <code>transparent</code> and <code>none</code> values <strong>in this case</strong> are the same, so in your example and for your original question, No, there's no difference between them.</p> <p>But!.. if you say <code>background:none</code> Vs <code>background:red</code> then yes... there's a big diference, as I say, the first would set all properties to <code>none/default</code> and the second one, will only change the <code>color</code> and remains the rest in his <code>default</code> state.</p> <h2>So in brief:</h2> <p><strong>Short answer</strong>: No, there's no difference at all (in your example and orginal question)<br> <strong>Long answer</strong>: Yes, there's a big difference, but depends directly on the properties granted to attribute.</p> <hr> <h2>Upd1: Initial value (aka <code>default</code>)</h2> <p>Initial value the concatenation of the initial values of its longhand properties:</p> <pre><code>background-image: none background-position: 0% 0% background-size: auto auto background-repeat: repeat background-origin: padding-box background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties background-clip: border-box background-color: transparent </code></pre> <h2> See more <code>background</code> descriptions <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background">here</a></h2> <hr> <p>Upd2: Clarify better the <code>background:none;</code> specification.</p>
    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.
 

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