Set the Background image and Background gradient of an element.
You can have multiple Background images and gradients applied to the same element. These are layered on top of each other to create a composite.
Type¶
Select whether to use an image or gradient.
Options and behavior:¶
- Image (default) - Set the background as an image
- Gradient - Set the background as a gradient
- None - Set the background to none
Image¶
Shown if image is selected in Type field.
Set a background image (or multiple background images) on the element.
Application and options:¶
- Click on the thumbnail to select an image
- For multiple images or gradients or a mix of both, click Add image or gradient to add another image
- Multiple images can be dragged up and down to change their stacking order
Find more information about background image at https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Drupal image style¶
Set a Drupal image style to be applied to the background image.
Size¶
Set the size of an element's background image.
Options and behavior:¶
- Auto - Set the background to its original size
- Contain - Scale the image as large as possible without cropping it
- Cover - Scale the image as large as possible so no empty space occurs in the element. The image will be cropped if necessary
- Numeric - Scale the image to the specified values in width and height
- Width - Specify the width in px or auto
- Height - Specify the width in px or auto
Find more information about background image size at https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Repeat¶
Set how the background image will repeat (or tile).
Options and behavior:¶
- No repeat - Set the background not to repeat
- Repeat - Set the background to repeat vertically and horizontally
- Repeat horizontal - Set the background to repeat horizontally
- Repeat vertical - Set the background image to repeat vertically
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
Attachment¶
Set the background image to be fixed or scroll within the browser viewport.
Options and behavior:¶
- scroll - Set the background to scroll with the element
- fixed - Fix the background to the viewport
- local - Set the background to scroll with the element's content if the element has a scrolling mechanism
Note: Background attachment fixed will not work on iOS and some other mobile devices.
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
X-position¶
Set the horizontal position of the background image.
Options and behavior:¶
- left - Set the background image to start from the left edge of the image
- centre - Set the background image to start from the horizontal centre of the image
- right - Set the background image to start from the right edge of the image
Note: Use with x offset for precise image positioning.
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x
X-offset¶
Set the horizontal offset of the background image.
Behavior:¶
- Positive numbers move the image away from the left edge or right edge depending on the value set on x position
- Example: If the x position is set to right and the x offset is 100px the image will move 100px to the left
Expected value:¶
- Enter a number
- Negative values are accepted
Accepted units:¶
You can leave blank or specify a unit to be used.
- blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
- px - The value will be applied in pixels
- % - The value will be applied as a percentage of the parent width
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x
Y-position¶
Set the vertical position of the background image.
Options and behavior:¶
- top - Set the background image to start from the top edge of the image
- centre - Set the background image to start from the vertical centre of the image
- bottom - Set the background image to start from the bottom edge of the image
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y
Y-offset¶
Set the vertical offset of the background image.
Behavior:¶
- Positive numbers move the image away from the top edge or bottom edge depending on the value set on y position
- Example: If the y position is set to bottom and the y offset is 100px the image will move 100px up
Expected value:¶
- Enter a number
- Negative values are accepted
Accepted units:¶
You can leave blank or specify a unit to be used.
- blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
- px - The value will be applied in pixels
- % - The value will be applied as a percentage of the parent width
Note: Additional units are accepted. For more information see https://www.w3schools.com/cssref/css_units.asp
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y
Gradient¶
Shown if gradient is selected in Type field.
Set the background gradient of an element.
Expected value:¶
- Select a gradient from the Gradient picker
Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient