3

I am used to writing out my background properties in shorthand like so...

background: #444 url(hero.jpg) no-repeat center right;

Is there anyway I can incorporate the background-size property into my shorthand? What about some of the new css3 background properties? Are they are able to be written in shorthand?

fauverism
  • 1,970
  • 3
  • 33
  • 59
  • 1
    Did you see this question? [background-size in shorthand background property (CSS3)](http://stackoverflow.com/questions/7864448/background-size-in-shorthand-background-property-css3) – Dan Sep 16 '14 at 18:12
  • No I didn't thanks for sending along – fauverism Sep 16 '14 at 18:41

1 Answers1

6

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.

amacrobert
  • 2,707
  • 2
  • 28
  • 37