DONT ADD ANYTHING HERE!

  1. The background-clip CSS property sets whether an element's background extends underneath its
    1. border box
    2. padding box
    3. content box
  2. The background is always drawn behind the border, so background-clip: border-box has a visual effect only when the border is partially opaque or has transparent or partially opaque regions
  3. values
    1. border-box
      The background extends to the outside edge of the border (but underneath the border in z-ordering)
    2. padding-box
      1. The background extends to the outside edge of the padding
      2. No background is drawn beneath the border
    3. content-box
      The background is painted within (clipped to) the content box
    4. text
      The background is painted within (clipped to) the foreground text
    5. border-area
      The background is painted within (clipped to) the area painted by the border, taking border-width and border-style into account but ignoring any transparency introduced by border-color

Example

Blue Square
background-clip: border-box

Notes

  1. The background-color is yelow
  2. The red box is a background-image
  3. The blue box is a foreground (ordinary) image
  4. The border of the containg box is green and dashed

Code

CSS

    .outer {
        margin: 1em;
        border: 1em dashed green;
        background-image: url("../images/myRedSquare2.png");
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        width: 100%;
        text-align: center;
        background-color: lightgoldenrodyellow;
    }

    .borderBox {
        background-clip: border-box;
    }

    .contentBox {
        background-clip: content-box;
    }

References

MDN: background-clip