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-width box filling the top page margin between the top-left-corner and top-center page-margin boxes
top-center a variable-width box centered horizontally between the page's left and right border edges and filling the page top margin between the top-left and top-right page-margin boxes
Note: Using a top-center box together with a top-left or top-right will create a sequence of three areas of identical width, with the top-center box occupying the center.
top-right a variable-width box filling 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 filling 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 filling the left page margin between the left-top and left-bottom page-margin boxes
left-bottom a variable-height box filling the left page margin between the left-middle and bottom-left-corner page-margin boxes
right-top a variable-height box filling 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 filling the right page margin between the right-top and right-bottom page-margin boxes
right-bottom a variable-height box filling 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-width box filling the bottom page margin between the bottom-left-corner and bottom-center page-margin boxes
bottom-center a variable-width box centered horizontally between the page's left and right border edges and filling the bottom page margin between the bottom-left and bottom-right page-margin boxes
Note: Using a bottom-center box together with a bottom-left or bottom-right will create a sequence of three areas of identical width, with the bottom-center box occupying the center.
bottom-right a variable-width box filling 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
Note: The initial and unset property values are not supported when applied to page margin boxes.