2022.2

Pulling an image out of the text flow
Whendraggedintoatemplate,animageisautomaticallyintegratedinthetextflow.Thismeansthatit
willmoveupordown,dependingontheprecedingtext.
InaPrintsection,topositiontheimageindependentlyofthetextflow,youcanchangeitsposition
propertytoabsolute.(Foranexplanationofallpossiblevaluesforthisproperty,see
https://www.w3schools.com/css/css_positioning.asp.)
WhenanimageisplacedinsideaBox(orDivelement),changingitspositionpropertytoabsolute
positionstheimageabsolutelyinsidethatBox.
Notethatfloat,thepropertythatcanmakeanimagefloattotherightorleft(see"Wrappingtext
aroundanimage"onthepreviouspage),isarelativepositioningproperty,sinceitspecifiestheposition
oftheelementrelativetoitscontainer.Thismeansitisincompatiblewiththeposition:absolute
property.
IntheFormattingdialog(see"Applyinglocalformattingtoanimage"onpage693)thepositionprop-
ertycanbefoundontheImagetab,underPositioning.
Thepositionpropertyisn'tpresentinoneofthetabmenusofthestyleruleeditordirectly,butyou
canadditafterclickingtheAdvancedbuttoninthestyleruleeditor(see"Applyingstylerulestoan
image"onpage693).
Whenthepositionpropertyofanelementissettoabsolute,thetoporbottomandleftor
rightpropertiescanbeusedtopositiontheelementinsideitsparentwithexactvalues(pixels(px),
centimeters(cm),etc).Negativevaluesareallowed.
Note: InWebsections,thepositionpropertymaysometimesbeusefulforimagesinsideaDiv
element,butgenerallyelementsshouldnotbepositionedabsolutely.DesignsfortheWebshould
beflexiblesothattheydisplaynicelyonavarietyofdevicesandscreensizes.
Background color and/or image
Inanytypeoftemplate,boxes,tablesandtablecellscanhaveabackgroundcolorand/orabackground
image.
Toselectabackgroundimageorcolor:
1. Right-clicktheboxandclickBoxontheshortcutmenu.
2. Alternatively,selectthebox(see"Selectinganelement"onpage570;notethataBoxisa<div>
element)andontheFormatmenuclickBox.
3. ClicktheBackgroundtab.
Todefineabackground color:
ClickthedownwardpointingarrownexttoColortoselectacolorfromthelistofpredefinedcolors(see
"Backgroundcolorand/orimage"above).
Page 695