The shorthand definition of the css background property is as follows:
background: color position/size repeat origin clip attachment image|initial|inherit;
But then i find following examples:
body {
background: #00ff00 url('smiley.gif') no-repeat fixed center;
}
So here the order is: color-image-repeat-attachment-position
Is there any reason why this order can change?
Shorthand properties try not to force a specific order for the values of properties, this however works well when those properties have values of different types but not when those properties could have identical values.
Background shorthand property has values of different types so the order of values shouldn't cause errors, however you should stick to the standard order to maintain good readability.
Here's a manual from mozilla's dev center about shorthand properties, the statement that I quoted about the order can be seen under 'Tricky Edge Cases' at point #3.
https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
Related
The other topics don't seem to solve my case.
My code looks like this:
body {
background: url("th.jpg") initial/cover no-repeat #fff00f;
}
were I to replace initial with let's say top right it would work though initial is a property value of background-position. Were I to type top right/initialit wouldn't work either even though initial is a property value of background-size. No need to say it'd be the same if I wrote alone "initial".
What's the problem? I use the order referenced on: https://www.w3schools.com/cssref/css3_pr_background.asp
I saw the following statement at MDN website. The page itself is about "border-radius", but I think the statement applies to all shorthand properties.
I'm not exactly sure what they meant by "individual inherited values are not possible with any shorthand property", could someone please explain it to me?
As the note says, the following is invalid, even though intuitively it looks like it should set two of the corner radii to 0 and two of them to inherit:
border-radius:0 0 inherit inherit
This is because different shorthands have different grammars making it impossible for multiple inherit values to be mixed with other values. You wouldn't be able to determine which of the component properties should inherit, and you wouldn't be able to determine how to parse the remaining values that aren't inherit.
For example, while the above declaration looks easy enough, consider a background declaration:
background: inherit inherit #fff
There are two inherit keywords here, but the background shorthand contains a multitude of component properties with a complex grammar. It's impossible to determine which two of the longhands other than background-color should inherit. You have to tell the browser. Which means writing longhand declarations.
So, inherit is defined as a CSS-wide keyword that may only appear by itself in any property declaration, including shorthands. This eliminates any possible ambiguity regardless of whether the property is a longhand property accepting a single value, a longhand property accepting multiple values (such as border-top-left-radius or background-size), or a shorthand property.
See also: Leaving certain values unchanged when using CSS shorthand properties
According to the W3C Recommendation for the CSS background shorthand, the values are [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit.
Following that recommendation, I write a declaration like this:
background: transparent url("/images/layout/sprite.png") repeat-y scroll right top;
When I inspect that element in Firebug, it lists the color part last, instead of first:
background: url("/images/layout/sprite.png") repeat-y scroll right top transparent;
Using it the Firebug way seems to work, but it doesn't follow the W3C Recommendation. I tried some Google searches, but I couldn't find any information on this. Is there some history that I am unaware of? Is it a Firebug bug?
http://www.w3.org/TR/CSS2/about.html#property-defs
A double bar (||) separates two or more options: one or more of them
must occur, in any order.
So, the background values may be listed in any order.
The W3C doesn't define an order in this grammar. Background properties can be listed in any order.
According to this (scroll down to: Background - Shorthand property)
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the ones that are present are in this order.
I'm trying to understand someone's CSS >> HERE <<.
Basically, he has defined his background element with this syntax:
background: url( 'bars.gif' ) 0 -50px no-repeat;
My image is a different size than his, so I am trying to adjust my code to fit my image. However, the w3schools info on CSS Background shows that this format should be used:
background: #ffffff url('img_tree.png') no-repeat right top;
Where is the overload info for background located?
Good question.
Short answer: The order is irrelevant to the final product.
Background is shorthand for five different properties.
background-color (# followed by digits or a named color)
background-image (url('url goes here'))
background-repeat (repeat, repeat-x, ...)
background-attachment (fixed, scroll)
background-position (location, percent, or pixels)
Notice that each option contains a unique formatting. This allows the renderer to understand the declaration without relying on a specific order. Also, any parameters unspecified are set to the default.
W3schools suggests a format to reduce the cognitive load on developers (which obviously didn't work in this case). I would suggest that you stick with W3's suggestion to hopefully avoid this confusion in the future.
background:#777777 none repeat scroll 0 0;
the 5 attributes it includes are background-color,background-image,background-repeat,background-attachment and background-position.
My question is:
Are background-repeat,background-attachment and background-position useless if background-image is none?
Because according to the document,these are all used to change background-image.
yes. They have no meaning without that.
You can simply write
background:#777777;
or,
background-color:#777777;
All of those attributes affect the image only.
In general, if a CSS attribute sets multiple values (eg, background, border, font), you don't need to specify all of the values; any values you don't specify will be left at their defaults.
IF you just want a background color, consider using the background-color attribute instead of background.