--- title: "Header media 3:1 ratio" url: "https://www.toujou.com/service/element-library/header/header-media-31-ratio/" date: 2019-08-01 modified: 2026-01-16 --- # Header media 3:1 ratio 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Header](https://www.toujou.de/service/element-library/header/) 5. [Header media 3:1 ratio](https://www.toujou.de/service/element-library/header/header-media-31-ratio/) Image header 3:1 ratio ====================== Your maximum width header element with a fixed 3:1 aspect ratio and an optional headline. Item-ID: 07-012 [Sample views](#c1006490) [Step by step guide](#c1006492) [File sizes](#c1006494) [Screen adaptation](#c1002143) --- Sample view per device ------------------------ [ ![](https://www.toujou.de/_assets/processed/rqEz28et-eeO2MS4B2TOLdoI_s2qGsVNlLJjnzb9bVU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDFfd2lkZXNjcmVlbl8wMV84YzVjNGE1NjY0:t/cb:7a8ccdcf7550ffa13506278b0d6dca3a882432f5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMV93aWRlc2NyZWVuXzAxLnBuZw) View for devices of more than 1440 px width ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_01_widescreen_01.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/sToyNoAYfFZzOXMl2kbbdq4_OfsMwblQU_8N-AHIWRQ/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDJfZGVza3RvcF8wMV9kOGY3YTRmNTcw:t/cb:cf11e2c1dd6903a060e0677edb2f44d6ab858062/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMl9kZXNrdG9wXzAxLnBuZw) View for devices of more than 1024 px width ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_02_desktop_01.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/93m82QIdiCPe-48YB8nXAF4YOmis5KK2hs4yqk49VC8/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDNfdGFibGV0XzcyN2JhZmQ1Y2Y:t/cb:0abb494744a57e8053ca0b0d285da55526be4c61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wM190YWJsZXQucG5n) View for devices of more than 600 px width ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_03_tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/dCbtxzEAYDr6_CDO689A7oG_tBeITkh0gsTS5ou8ZhU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDRfbW9iaWxlX2EwNWQ1MjlhYmE:t/cb:50d754f02d462b2f9b0c54986c930b65b39332e2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wNF9tb2JpbGUucG5n) View for devices of more than 375 px width ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_3-1_04_mobile.png) #### **Mobile** --- Step by step guide -------------------- [ ![](https://www.toujou.de/_assets/processed/brqiHkQ7DwdgSz7C1Ea5RYqqzQQnFBEqmjAeGjfXKms/q:85/w:432/h:270/fn:Y3NtX0VOXzAyXzAxX0hlYWRlcm1lZGlhX3dhZWhsZW5fNWRiZDZlMDdhNg:t/cb:1374675a68e0b28874d32fc6b5cec7fc44227b68/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0VOL0VOXzAyXzAxX0hlYWRlcm1lZGlhX3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/EN/EN_02_01_Headermedia_waehlen.png) ### Create header element - Header elements are only selectable as elements in the header area *(Kopfbereich*) of your page. - Click on the **+ Content** button and select the *Header-Media Element* *(3:1-ratio)* element under the *Widgets* tab. [ ![](https://www.toujou.de/_assets/processed/c-FcxJPpWsbS6NsHUCs7_zts3kfFJzc2DoJvIMZj7mc/q:85/w:432/h:270/fn:Y3NtX0VOXzAyXzAyX01lZGl1bV93YWVobGVuXzIxZTVkYmE3ZmM:t/cb:d43b635bbdfa6d87a2712e871f715df2f56ba7b2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0VOL0VOXzAyXzAyX01lZGl1bV93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/EN/EN_02_02_Medium_waehlen.png) ### Insert medium - To insert an image, click **Add media file** in the *General* tab. - Select an image file from your file list or upload a file to the appropriate folder. - To insert a video, click **Add media by URL &** paste the full URL of a YouTube or Vimeo video into the mask that appears in an overlapped window. [ ![](https://www.toujou.de/_assets/processed/GVhhuufAEm81O8iecqODk5o86Yk0QXjew8ATRa6MT1c/q:85/w:432/h:270/fn:Y3NtX0VOXzAyXzAzX0hlYWRsaW5lX1NpemVfMWM2ZjFmYjE3OA:t/cb:acb8b5aa8d1012224b52ac5bae28111d56c2b806/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0VOL0VOXzAyXzAzX0hlYWRsaW5lX1NpemUucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/EN/EN_02_03_Headline_Size.png) ### Insert headline (optional) - You have the option to place a *Headline*. - In the *Content* tab, an *H2* tag is assigned by default. If necessary, change this setting via *Type* and *Headline Size* ([more about Headlines ❯](https://www.toujou.com/service/elementbibliothek/headline-element/headline-h1/#c1003851)). [ ![](https://www.toujou.de/_assets/processed/a9gB72SE3gqRhDV2G0UbyFEkguyUKXuGIesrmucrRf4/q:85/w:432/h:270/fn:Y3NtX0VOXzAyXzA0X0hlYWRsaW5lX1Bvc2l0aW9uXzAzOWNmNzM3ODg:t/cb:b8b2ea50edfe03b9f631a6f123968c37dde376b3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0VOL0VOXzAyXzA0X0hlYWRsaW5lX1Bvc2l0aW9uLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/EN/EN_02_04_Headline_Position.png) ### Headline position - In the *Settings* tab, you can use the *Vertical* and *Horizontal Position* to determine the exact position of your headline. --- File sizes ------------ ##### General notes for files: - When using photographs, the file format JPEG is recommended. Graphics can also be PNG files. - In toujou, media files must not exceed a size of **8 MB**. - Each file only needs to be uploaded once to your [file list](https://www.toujou.de/service/tutorials/file-list-module/). - Each file can be edited in the [image editor](https://www.toujou.de/service/tutorials/page-content/image-editing/) for different devices and used multiple times on your website in various elements. ##### Advice for using header videos: - Be sure to use a moderate sized file as this may affect the performance of your website. - When videos are embedded, from platforms such as YouTube and Vimeo, they insert their own links and suggestions to the screen that may take away from the aesthetic of your header. To prevent this from happening you can instead use a video as a [media content element](https://www.toujou.de/service/element-library/media-elements/). --- Screen adaptation ------------------- The behaviour of the *Header media element 3:1* is illustrated by the sample views shown above: Regardless of the device, the medium always remains in full display. This element is useful, if all image information should be transported on all devices and your header image/video should not be cut off at the sides. It always retains its aspect ratio regardless of the device. --- Linked topics ------------- [toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description. [Image editing](https://www.toujou.com/service/tutorials/page-content/text-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)