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 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;
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>
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.
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.
Error: CSS: background: / is an incorrect operator
If we refer to the formal syntax:
The /
is the separation between background-position
and background-size
(this one being optional) so the correct syntax is:
background: url(...) 100% 0/4% no-repeat;
Where background-position:100% 0
and background-size:4%
Note that background-size
should always be specified with background-position
when using shorthand syntax. You cannot specify the size without position but you can specify position without size:
background: url(...) 100% 0 no-repeat;
Relatad question: Issues with "background-position" in "background" shorthand property
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.
Related Topics
Have a Fixed Position Div That Needs to Scroll If Content Overflows
Prevent Flex Items from Overflowing a Container
Force Sidebar Height 100% Using CSS (With a Sticky Bottom Image)
How to Change Font-Color for Disabled Input
Run CSS3 Animation Only Once (At Page Loading)
Differencebetween Default, User and Author Style Sheets
CSS - Style a Link Based on Its "Rel" Attribute
Media Queries and Background Images
How to Align Spans or Divs Horizontally
Display Property Differences for Inline-*Something*
Make Scrollbars Only Visible When a Div Is Hovered Over
How Is the "Greater Than" or ">" Character Used in CSS