> For the complete documentation index, see [llms.txt](https://everyday-digital.gitbook.io/authoring-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/image-cover.md).
# Image Cover
## What is an Image Cover?
The Image Cover page accommodates an image with or without a text overlay.
## Quick steps: how to create & edit an Image Cover page
1. **Open Authoring.** Create or open a [Learning Story](/authoring-docs/authoring/content-types/learning-story.md), [Assessment](/authoring-docs/authoring/content-types/assessment.md) or [Survey](/authoring-docs/authoring/content-types/survey.md) [content type](/authoring-docs/authoring/content-types.md).
2. **Open the Editor.**
3. **Add an Image Cover page.** Select the + icon and choose Image Cover from the Add Page options.
4. **Edit the Image Cover page.** Select the page to view [Page Options](/authoring-docs/content-pages/story-and-page-settings.md#what-are-the-page-options), and select Update to add and edit content. Add an [image](#what-are-the-best-dimensions-for-an-image-cover) and text overlay (optional).
5. **Format text and image layout and style.** Enter a text overlay (maximum 24 characters) and use the available [Settings](#image-cover-settings) as desired.
## Image Cover Settings
### Text Settings
**Text Layout Type**\
**Choose Heading & Sub-Heading or Heading & Text.** Heading & Sub-Heading consists of a small heading with a maximum of 24 characters and big heading with a maximum of 45 characters. Heading & Text consists of a big heading with a maximum of 45 characters, and a short paragraph of text with a maximum of 144 characters.
**Text Position**\
Choose the heading text position: Center, Top Left, Top Center, Top Right, Bottom Left, Bottom Center, or Bottom Right.
**Text Colour**\
Select from the available options.
**Text Shadow**\
Select Yes/No.
### Position & Fill Settings
**Position**\
Determines the origin where the image must be anchored when the image fills the screen.\
\
**Image Fill**\
Determines how the image must fill the screen.
* **Full Width / Height (Default)**\
Fills the screen with the image until width and height of the screen is covered. Ideal for non-critical or aesthetic images.
* **Full Width**\
Fills the screen with the image until the width of the screen is covered. Ideal if the width of the image is more important to see than the height.
* **Fill Height**\
Fills the screen with the image until the height of the screen is covered. Ideal if the height of the image is more important to see than the height.
* **Contain Width / Height**\
Ensures the entire image is visible on screen and will automatically adjust width and height.
**Image Orientation**\
Landscape, Portrait, Auto.
### Colour & Effect Settings
**Filters**\
Choose from: None (Default), Inkwell, 1977, Amaro, Brannan, Crema, Moon, Perpetua, Toaster, Nashville, X-Pro II, Ghost
**Background Colour**\
Choose a colour to overwrite the theme default.
**Blend Out**\
Choose None (Default) or Yes. If Yes, then the image edges will be blended into the background.
**Image Effect (Non-Mobile)**\
For the desktop and tablet view, you can add image effects which include: None (Default), Shadow, Framing or Framing with Shadow
### Mobile Device Settings
**Screen Adaption (Mobile Only)**\
Set how the image should appear on screen:
* Rotate to Fit, or
* Clip to Center,
* Clip to Left, or
* Clip to Right.
{% hint style="info" %}
If you do not want your image to be clipped on mobile view, you should select Rotate to Fit.
{% endhint %}
## Image Cover Tips and FAQs
### What are the best dimensions for an Image Cover?
**Insert a landscape image at 1900px (w) x 1268px (h), and a portrait image at 800px (w) x 1200px (h).** If your image is not the exact size, it will automatically be cropped and resized depending on the image orientation you select (portrait and landscape are cropped, whereas auto will only resize).
### Which formats are accepted for the Image Cover?
Images must be in .svg, .jpg or .png format.
### Why is my image being cropped or cut off?
**If the image does not fit on the page, some settings may need to be adjusted.** When the image is always required to be contained in the view on Mobile and Desktop, the best option is to use **Contain Width & Height**. The other options won't work across screens.
Since mobile ratios vary so constraint would be the only option to use to keep the image in view across devices.
Make sure that under Mobile Device Settings, the Screen Adaption settings is set to None (Default).
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://everyday-digital.gitbook.io/authoring-docs/content-pages/content-page-library/image-cover.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.