Skip to content

Media Backgrounds

Jump to bottom
Jo Dickson edited this page Mar 6, 2018 · 3 revisions

Athena's media backgrounds consists of a parent wrapper element and a child <img> or <video> element. These two utility classes are accessible via two separate shortcodes, documented below:

Jump To Section:

[media-background-container]

Creates a media background container.

Attributes

Shortcode Attribute Name Description Default Value
element_type Element Type Specify the type of element to use.

Valid options:
  • div
  • section
  • aside
  • a
 div
href Link location Link (for link elements).
rel Link object relationship (rel) The relationship between the link and target object (for link elements). Separate each link type with a single space.
new_window New Window Open link in a new window (for link elements) false
class CSS Classes Classes to apply to the element. Separate each class with a single space.
id ID ID attribute for the element. Must be unique.
style Inline Styles Any additional styles for the element.

[media-background]

Creates a media background. An immediate child image or video within the shortcode is auto-detected and used as the media background.

Attributes

Shortcode Attribute Name Description Default Value
object_fit Object Fit How the inner media background should be resized within the media background container.

Valid options:
  • object-fit-contain
  • object-fit-cover
  • object-fit-fill
  • object-fit-none
  • object-fit-scale-down
 object-fit-cover
object_position Object Position How the inner media background should be positioned within the media background container. See object-position documentation for usage/more information.
class CSS Classes Separate each class with a single space. Refer to the Athena Framework documentation for available classes.
id ID ID attribute for the inner element. Must be unique.
style Inline Styles Any additional styles for the inner element.

Examples

With an image

[media-background-container]
[media-background]
<img src="..." alt="..." id="...">
[/media-background]
Your content here
[/media-background-container]

With a video

[media-background-container]
[media-background]
<video>
<source src="...">
</video>
[/media-background]
Your content here
[/media-background-container]

Note that YouTube and other video service embeds will not work as media backgrounds; the video must be included using the <video> element (generally you'd do this by uploading and inserting the video into the page via the media library.)

You do not need to add extra classes or attributes to the <img> or <video> elements added within the [media-background] shortcode; the classes, ID and styles you specify in the shortcode, as well as any other necessary attributes for semantics and accessibility, will be applied to the inner element automatically.

Clone this wiki locally