Background image and gradient properties

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

More information:

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

You can apply multiple gradients to the background to create different effects. For multiple images or gradients or a mix of both, click Add image or gradient to add another image.

More information:

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/gradient