{"result":{"depiction_url":null,"edges":{"hasreference":{"objects":[{"created":"2026-10-07T11:13:41Z","object_id":{"id":2953,"is_a":["text","documentation","developerguide"],"name":"developer_content_edges","title":{"_type":"trans","tr":{"en":"Connect resources and preserve order"}},"uri":"https:\/\/zotonic.com\/id\/2953"},"seq":1},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2945,"is_a":["text","documentation","developerguide"],"name":"developer_template_media","title":{"_type":"trans","tr":{"en":"Display images with mediaclasses"}},"uri":"https:\/\/zotonic.com\/id\/2945"},"seq":2}],"predicate":{"id":2774,"is_a":["meta","predicate"],"name":"hasreference","title":{"_type":"trans","tr":{"en":"Documentation reference"}},"uri":"https:\/\/zotonic.com\/id\/hasreference"}},"references":{"objects":[{"created":"2020-05-30T05:47:27Z","object_id":{"id":1279,"is_a":["text","documentation"],"name":"doc_glossary","title":"Glossary","uri":"https:\/\/zotonic.com\/id\/1279"},"seq":1000000},{"created":"2020-05-30T05:47:27Z","object_id":{"id":1369,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_image_url","title":"image_url","uri":"https:\/\/zotonic.com\/id\/1369"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"subject":{"objects":[{"created":"2026-10-07T11:13:41Z","object_id":{"id":2557,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_cookbook_recipe","title":"Cookbook recipe","uri":"https:\/\/zotonic.com\/id\/2557"},"seq":1},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2620,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_template","title":"Template","uri":"https:\/\/zotonic.com\/id\/2620"},"seq":3},{"created":"2026-10-07T11:13:41Z","object_id":{"id":2577,"is_a":["categorization","keyword","keyword_domain"],"name":"zotonic_topic_image_management","title":"Image management","uri":"https:\/\/zotonic.com\/id\/2577"},"seq":4}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1586,"is_a":["text","documentation","cookbook"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1586"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_cookbook_frontend_pagebackgrounds","page_url":{"en":"https:\/\/zotonic.com\/cookbook\/1586\/show-a-page-background-image","x-default":"https:\/\/zotonic.com\/cookbook\/1586\/show-a-page-background-image"},"preview_url":null,"resource":{"version":34,"pivot_location_lat":null,"title":{"_type":"trans","tr":{"en":"Show a page background image"}},"is_authoritative":true,"body":{"_type":"trans","tr":{"en":"

Create a predicate named background<\/code> with the desired page and image category constraints, then connect an image to a practice page through that predicate. Use the first connected image in the page template:<\/p>\n

{% with id.o.background[1] as background_id %}\n    {% if background_id %}\n        {% image background_id class="page-background" alt="" %}\n    {% endif %}\n{% endwith %}\n<\/code><\/pre>\n
In the site's stylesheet:<\/p>\n
.page-background {\n    position: fixed;\n    inset: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    z-index: -1;\n}\n<\/code><\/pre>\n
Adjust the stacking context to your page layout and give the content enough contrast. An empty alt text marks this as decoration; meaningful images need descriptive text in the page. Use a mediaclass to limit generated size for the actual design. Test with no connection, one image, a small screen and a logged-out visitor.<\/p>"}},"is_mailing_opt_out":false,"slug":"show-a-page-background-image","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"is_featured":false,"content_group_id":{"id":339,"is_a":["meta","content_group"],"name":"default_content_group","title":{"_type":"trans","tr":{"en":"Default Content Group"}},"uri":"https:\/\/zotonic.com\/id\/default_content_group"},"category_id":{"id":318,"is_a":["meta","category"],"name":"cookbook","title":{"_type":"trans","tr":{"en":"Cookbook"}},"uri":"https:\/\/test.zotonic.com\/id\/318"},"publication_start":"2022-02-15T10:01:00Z","is_website_redirect":false,"github_url":"https:\/\/github.com\/zotonic\/zotonic\/tree\/master\/doc\/cookbook\/frontend-pagebackgrounds.rst","pivot_location_lng":null,"name":"doc_cookbook_frontend_pagebackgrounds","is_unfindable":false,"is_published":true,"doc_editorial_edges":{"hasreference":[2945,2953],"subject":[2557,2563,2577,2620]},"summary":{"_type":"trans","tr":{"en":"Connect one image and render it without constructing inline CSS from input."}},"pivot_geocode":null,"custom_slug":false,"created":"2020-05-30T05:47:27Z","uri":null,"date_is_all_day":false,"is_dependent":false,"is_page_path_multiple":false,"translation_status":{"en":""},"publication_end":"9999-08-17T12:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_editorial_bundle":true,"creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"seo_noindex":false,"modified":"2026-10-07T11:13:50Z","title_slug":{"_type":"trans","tr":{"en":"show-a-page-background-image"}}},"uri":"https:\/\/zotonic.com\/id\/1586","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1586"}},"status":"ok"}