==================
Extending the Page
==================

In Neos the page is a simple Node Type named Neos.Neos:Page, you can directly extend this Node Type to add specific
properties. Below you will find a simple example for adding a page background image:

Yaml (Sites/Vendor.Site/Configuration/NodeTypes.yaml) ::

	'Neos.NodeTypes:Page':
	  ui:
	    inspector:
	      groups:
	        background:
	          label: 'Background'
	          position: 900
	  properties:
	    backgroundImage:
	      type: Neos\Media\Domain\Model\ImageInterface
	      ui:
	        label: 'Image'
	        reloadPageIfChanged: TRUE
	        inspector:
	          group: 'background'


With this configuration, when you click on the page, you will see the Image editor in the Inspector.

To access the backgroundImage in your page template you can also modify the Neos.Neos:Page Fusion object, like
in the below example:

Fusion (Sites/Vendor.Site/Resources/Private/Fusion/Root.fusion) ::

	prototype(Neos.Neos:Page) {
		body.backgroundImage = ${q(node).property('backgroundImage')}
	}

With Neos.Media ViewHelper you can display the Image with the follwing HTML snippet:

HTML ::

	{namespace media=Neos\Media\ViewHelpers}
	<style>
	html {
		margin:0;
		padding:0;
		background: url({media:uri.image(image:backgroundImage)}) no-repeat center fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	</style>