Edit online

Page Margin Boxes

The CSS specification defines numerous rectangular areas placed in the margins that surround the content of the page. These are called margin boxes and may be used to display static CSS-generated content (such as page numbers, publication titles, or other artwork).

@top-left {
    content: url('company-logo.png');
    background-color:red;
}

The following table shows each of the 16 margin boxes (taken from the CSS specification: https://www.w3.org/TR/css3-page/#margin-boxes):

Table 1. Page-Margin Box Definitions
Box Description Placement
top-left-corner A fixed-size box defined by the intersection of the top and left margins of the page box.
top-left A variable or fixed-width box that fills the top page margin between the top-left-corner and top-center page margin boxes.
top-center A variable or fixed-width box centered horizontally between the page's left and right border edges and fills the page top margin between the top-left and top-right page margin boxes.
top-right A variable or fixed-width box that fills the top page margin between the top-center and top-right-corner page margin boxes.
top-right-corner A fixed-size box defined by the intersection of the top and right margins of the page box.
left-top A variable-height box that fills the left page margin between the top-left-corner and left-middle page margin boxes.
left-middle A variable-height box centered vertically between the page's top and bottom border edges and fills the left page margin between the left-top and left-bottom page margin boxes.
left-bottom A variable-height box that fills the left page margin between the left-middle and bottom-left-corner page margin boxes.
right-top A variable-height box that fills the right page margin between the top-right-corner and right-middle page margin boxes.
right-middle A variable-height box centered vertically between the page's top and bottom border edges and fills the right page margin between the right-top and right-bottom page margin boxes.
right-bottom A variable-height box that fills the right page margin between the right-middle and bottom-right-corner page margin boxes.
bottom-left-corner A fixed-size box defined by the intersection of the bottom and left margins of the page box.
bottom-left A variable or fixed-width box that fills the bottom page margin between the bottom-left-corner and bottom-center page margin boxes.
bottom-center A variable or fixed-width box centered horizontally between the page's left and right border edges and fills the bottom page margin between the bottom-left and bottom-right page margin boxes.
bottom-right A variable or fixed-width box that fills the bottom page margin between the bottom-center and bottom-right-corner page margin boxes.
bottom-right-corner A fixed-size box defined by the intersection of the bottom and right margins of the page box.
Notes:
  • The rules for variable-width at-rules (top or bottom) are the following:
    • When one box is defined, it takes the full available width.
    • When left and right boxes are defined, they take half of the available width.
    • When all 3 boxes are defined, each of them is one-third of the available width.
  • The width property values must be set for all 3 at-rules when using fixed values (regardless if those values are relative or absolute).
  • The initial and unset property values are not supported when applied to page margin boxes.