ページがレンダリングされる場合、背景設定は、ページの<head>
コード内の"style"
タグに動的に書き込まれます。
背景設定は、ページ・モデル・ファイル(<pageid>.json
など)内に永続化されます。特に、ページの背景設定はproperties.styles
セクションに格納され、スロットの背景設定はslots[<slot_id>].styles
セクションに格納されます。
次の典型的なサンプルに示されるとおり、背景設定はページのJSONファイル(特に"styles"
内)に格納されます。
{ "properties": { "pageLayout" : "oneslot.htm", "styles": [ "background-image: url([!--$SCS_CONTENT_URL--]/background_image.gif)", "background-position: center", "background-size: auto", "background-repeat: repeat", "background-origin: padding-box", "background-clip: border-box" ] }, "slots": { "slot100": { "components": [ "dedda3a8-615d-44ad-ad71-51f2fa465cef", "95eb0fd6-bcfc-4e5e-ba67-a5c8c5d9c315" ], "grid": "<div class=\"scs-row\"><div class="scs-col\"style=\"width: 50%;\"> <div id=\"dedda3a8-615d-44ad-ad71-51f2fa465ced\"> </div> </div> <div class=\"scs-col\" style=\"width: 50%;\"> <div id=\:95eb0fd6-bcfc-4e5e-ba67-a5c8c5d9c315\"> </div> </div> </div>", "styles": [ "background-image: url([!--$SCS_CONTENT_URL--]/oracle-cloudworld.jpg)", "background-position: center", "background-size: cover", "background-repeat: no-repeat", "background-origin: padding-box", "background-clip: border-box", "background-color: transparent" ] } }, "componentInstances": { "dedda3a8-615d-44ad-ad71-51f2fa465cef": { "type": "scs-title", "data": { "alignment": "fill", "backgroundColor": "", "borderColor": "#808080", "borderRadius": 0, "borderStyle": "none", "borderWidth": 1, "fontColor": "#333333", "fontFamily": "'Helvetica Neue', Helvetica, Arial, sans-serif", "fontSize": 24, "marginBottom": 5, "marginLeft": 5, "marginRight": 5, "marginTop": 5, "styleClass": "", "useStyleClass": "true", "userText": "<div>My Test Title</div>\n", "width": 400 } }, "95eb0fd6-bcfc-4e5e-ba67-a5c8c5d9c315": { "type": "scs-image", "data": { "styleClass": "", "useStyleClass": "true", "imageUrl": "[!--$SCS_CONTENT_URL--]/example.jpg", "defaultImageUrl": "/components/comp/images/default_image.png", "style": "", "imageWidth": 0, "borderStyle": "none", "borderWidth": 1, "borderColor": "black", "borderRadius": 0, "altText": "My Image", "title": "My Title", "caption": "My Caption", "imageAlignment": "center", "imageHref": "", "imageTarget": "_self", "marginTop": 0, "marginRight": 0, "marginBottom": 0, "marginLeft": 0, "linkType": "scs-link-no-link" } } } }