background-size isn't supported unless background is defined first

RESOLVED WORKSFORME

Status

()

Firefox
Untriaged
RESOLVED WORKSFORME
6 years ago
4 years ago

People

(Reporter: epodojil, Unassigned)

Tracking

({css3})

12 Branch
x86
Mac OS X
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

6 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.168 Safari/535.19

Steps to reproduce:

Try this for css:
div {
  background-size: cover; 
  background: url(image.jpg) no-repeat center;
}


Actual results:

Background size is not applied to the element.


Expected results:

Background size should be applied to the element.

This is an odd problem when alpha-organizing css (a feature in many text editors) that background: is defined after background-size. Webkit and IE9 still support background-size fine if background-size is defined BEFORE the actual background, however Firefox does not (I believe the size quality gets overwritten).
(Reporter)

Updated

6 years ago
Keywords: css3

Comment 1

6 years ago
There appears to be a bug in the parser. 

Moving 
  background: url(image.jpg) no-repeat center;
above background-size work. Placing it below leads to no image.
Status: UNCONFIRMED → NEW
Ever confirmed: true
This is correct per spec at http://dev.w3.org/csswg/css3-background/#the-background :
> for each layer the shorthand first sets the corresponding layer of each of
> [...], ‘background-size’, [...] to that property's initial value
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → INVALID
(Reporter)

Comment 3

6 years ago
This would be fine if cover was an acceptable argument for background shorthand. Note that

div {
   background: url(image.jpg) no-repeat center cover;
}

doesn't return anything (this is true in all browsers).

A developer could write background-image and avoid all shorthand, but the expected behavior should not be to re-declare a property that was initially defined in the selector unless it is specifically redeclared in the shorthand.
Status: RESOLVED → REOPENED
Resolution: INVALID → ---
(In reply to epodojil from comment #3)
> This would be fine if cover was an acceptable argument for background
> shorthand.

Okay, that part is apparently not implemented yet. It's bug 570326.

> A developer could write background-image and avoid all shorthand, but the
> expected behavior should not be to re-declare a property that was initially
> defined in the selector unless it is specifically redeclared in the
> shorthand.

Or rather, "unless it is possible to redeclare it in the shorthand". For example,
background-repeat: no-repeat; background: url(image.jpg) center; will reset background-repeat to repeat, even though it hasn't been redeclared in the shorthand.

I agree that the partial implementation is unfortunate, but I think just fixing bug 570326 should be the way forward.
With Bug 570326 can this get resolved? epodojil@gmail.com ?
Flags: needinfo?(epodojil)
(Reporter)

Comment 6

4 years ago
Looks great! Thanks guys.
Status: REOPENED → RESOLVED
Last Resolved: 6 years ago4 years ago
Flags: needinfo?(epodojil)
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.