2022.2

Table Of Contents

<imgsrc="file:/C:/Users/MyUser/Pictures/mixed.pdf?page=1"class="ol_pdf_datamapper_input">.

Youcanusetheol_pdf_datamapper_inputclassasaselectortotargetthesectionbackgroundina

styleruleorscript.

Placing the section background in front of the Master Page

ThestackingorderofelementsinsideeachMediaBox,frombottomtotop,is:

1. Media

2. Sectionbackground

3. MasterPageelements

Usingthe.page_mediaboxselector,youcouldchangethisstackingorderandplacethesectionback-

groundontopoftheelementsontheMasterPage.Setthez-indexpropertytoavaluelargerthan0

(zero)andadd!importanttomakethisstyleruleoverridetheinlinestyledeclarationthatnormallyputs

thesectionbackgroundbehindtheMasterPageelements:

.page_mediabox img.ol_pdf_datamapper_input {

z-index: 10 !important;

}

Scaling the section background

Therulebelowdownscalesthesectionbackgroundimageandkeepsitinthecentreofthepage:

.page_mediabox img.ol_pdf_datamapper_input {

transform: translate(-50%, -50%) scale(1.5, 1.5) !important;

}

View selectors

IntheDesigner,sectionscanbeviewedondifferenttabs:Source,Design,Previewand-ifitisaWeb

section-Live.Ineachviewmode(exceptSource)aspecificCSSclassisaddedtothe<html>element.

Theview-specificclassesare:

l

.DESIGN

l

.PREVIEW

l

.OUTPUT

.OUTPUTisusedwhenviewingthecurrentsectionontheLivetaborinanexternalbrowser,andwhen

generatingoutput.

Page 829