CSS background shorthand property not working with background-size
The background
shorthand requires that you also set background-position
in order to set background-size
. You can find the grammar for the background
shorthand in the spec, but in a nutshell the syntax for the two properties is
<bg-position> [ / <bg-size> ]
which means "background-position
, optionally followed by a forward slash then background-size
" (the usual optional-whitespace rules apply)
If you do not need to change background-position
to a different value, the initial value is 0 0
(zero on both axes):
background: url("img/background.jpg") 0 0 / cover no-repeat;
Issues with background-position in background shorthand property
As stated in the documentation of the background
property, background-size
cannot be set alone and it should be used with background-position
. Also inherit
and initial
aren't valid values for those properties.
CSS Background Shorthand property not work?
Two problems you have to fixed:
You doesn't have the ""
for the url.
You have to separately set the background-size:cover
property.
Set it in the background
will not work.
*Not sure if image/computer.png
is a local image or an invalid image. If it is a local image, just replace the url back (I change the url to wikipedia icon for showing purpose)
*{
padding: 0;
margin: 0;
}
.container{
width: 800px;
height: 800px;
margin: 0 auto;
border: solid 2px;
background: red url("https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Wikipedia-logo-v2.svg/2244px-Wikipedia-logo-v2.svg.png") 0 0 no-repeat fixed;
}
<div class="container">
</div>
how to use background-size : contain in shorthand property with background with url.?
background: #00ff00 url("smiley.gif") no-repeat fixed center / contain;
this should work.
Can you declare the background-size in shorthand for the background:
Yes. The full CSS3 syntax is:
background: color position/size repeat origin clip attachment image|initial|inherit;
Note: If one of the properties in the shorthand declaration is the background-size property, you must use a / (slash) to separate it from the background-postion property, e.g. background:url(smiley.gif) 10px 20px/50px 50px; will result in a background image, positioned 10 pixels from the left, 20 pixels from the top, and the size of the image will be 50 pixels wide and 50 pixels high.
CSS background shorthand, can't include size
From MDN:
The value may only be included immediately after ,
separated with the '/' character, like this: "center/80%".
To clarify: The solution is to write background: none center/contain no-repeat
, instead of separating them with spaces.
background-size in shorthand background property (CSS3)
- Your jsfiddle uses
background-image
instead ofbackground
- It seems to be a case of "not supported by this browser yet".
This works in Opera : http://jsfiddle.net/ZNsbU/5/
But it doesn't work in FF5 nor IE8. (yay for outdated browsers :D )
Code :
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
You could do it like this :
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
Which works in FF5 and Opera but not in IE8.
Why does css background-size/position not work with shorthand background url?
You have to use background-image
instead of the shorthand background
property. Shorthand background
resets background-size
and background-position
to their default values, which is why the first rule ends up not doing anything.
Moving the shared CSS last in the file would also make it work by having last say, although of course this is not a real solution.
How to include the background-cover value in the shorthand background property?
According to the W3 and MDN, there needs to be a slash separating the backgound-size from the background-position:
W3C example:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
MDN:
This property must be specified after background-position, separated
with the '/' character.
Opera also has some information on the background shorthand:
http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html
Background-size doesn't work
As the background-size docs state:
If the value of this property is not set in a background shorthand
property that is applied to the element after the background-size CSS
property, the value of this property is then reset to its initial
value by the shorthand property.
In other words, if you're using the shorthand property but don't include the background-size rule as a part of it, the separate background-size is essentially reset and ignored.
So to get around that you just need to roll it into the background shorthand you're already using by adding a slash after the background-position and including your size:
background: #00A7E1 url(http://placekitten.com/200/200) left center/20px 20px no-repeat !important;
jsFiddle example
Related Topics
Matrix 3D Transform for Obtaining Trapezoid
Move Multiple Backgrounds Infinitely Using CSS
CSS Non-Standard "Zoom" Property
Wobbly CSS Animation with Border-Radius in Internet Explorer
100% Width Div Gets Cut Off When I Scroll Right If My Browser Window Is Smaller Than Div's Content
Blinking Loading Text in R Shiny
Background Image Not Displaying in Chrome Browser
CSS: Set Div Height to 100% - Pixels
How to Center This Menu with CSS
CSS Display Property When a Float Is Applied
CSS Grid - Number of Columns Can Be Different in the First Row Than Second Row
Draw Half Circle with CSS or Svg
Base64 Font Encoding for Tumblr on Firefox
Css, Nested Divs & Margins VS. Padding