Smart Box with Cover Background

CSS backgrounds have 4 modes to display the background.  Each has advantages and disadvantages.  The important matter to remember is that css backgrounds do not map every pixel and resize everything in ratio in the manner a js background such as the rev slider performs.  So CSS backgrounds with content overlays have limitations. 

Cover Modes:

  1. bgSize=”auto” – background crops and does not resize on viewport but content stays static
  2. bgSize=”100% auto” – background displays correctly and resizes but content moves
  3. bgSize=”cover” (which is default and does not display in shortcode) – background displays according to position (aka center, center, etc) and resizes from that as page is resized, content stays static
  4. bgSize=”contain” – image scales and resizes but content moves