ページがレンダリングされる場合、背景設定は、ページの<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"
}
}
}
}